React: how to render data into a component?

Question

I want to pass data from props into another component but I'm having trouble passing data from a nested array. My JSON has the following structure:

[
  {
    id: 1,
    category: "Fish",
    nodes: [
      {
        id: 1,
        title: "Bacalhau com broa",
        ingredients: [
          "bacalhau",
          "broa"
        ]
      },
      {
        id: 2,
        title: "Bacalhau à Zé do Pipo",
        ingredients: [
          "bacalhau",
          "broa",
          "5 cebolas"
        ]
      },
    ],
  }
];

and I've tried the following, where dishesData contains the nodes from the JSON:

        {dishesData.map((dishes) => {
          dishes.forEach((dish) => {
            console.log(dish.title)
            return <Dish title={dish.title} ingredients={dish.ingredients} />;
          });          
        })}

The console.log(dish.title) is printing the correctly but not rendering my component to the page.

What's not rendering? The console log?

evolutionxbox
– evolutionxbox

2021-02-03 16:32:26 +00:00
Commented Feb 3, 2021 at 16:32 — evolutionxbox
– evolutionxbox, Commented Feb 3, 2021 at 16:32

vuongvu · Accepted Answer · 2021-02-03 16:42:07Z

1

your return statement is inside forEach so it won't work, you need to return the value to the parent map function:

{dishesData.map((dishes) => {
  return dishes.map((dish) => {
    return <Dish title={dish.title} ingredients={dish.ingredients} />;
  });          
})}

answered Feb 3, 2021 at 16:42

vuongvu

8497 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Namwanza Ronald · Accepted Answer · 2021-02-03 17:40:45Z

import React from 'react';

// Json data 
const dishesData = [
  {
    id: 1,
    category: "Fish",
    nodes: [
      {
        id: 1,
        title: "Bacalhau com broa",
        ingredients: [
          "bacalhau",
          "broa"
        ]
      },
      {
        id: 2,
        title: "Bacalhau à Zé do Pipo",
        ingredients: [
          "bacalhau",
          "broa",
          "5 cebolas"
        ]
      },
    ],
  }
];


// First component - I have used a functional component 
const ComponentOne = (props) => {
  // output: Bacalhau com broa, Bacalhau à Zé do Pipo
  const answer = dishesData.map(dishes => {
    dishes.nodes.map(dish=> dish.title)
  });
  
  // a title prop is pased to ComponentTwo component
  return (
      <ComponentTwo title = {answer} />
  );
}


// Another component that will receive our props passed to it

const ComponentTwo = (props) => {
  console.log(props.title)
  return (
    <p> {props.title} </p>
   )
}

export default ComponentOne;

Collectives™ on Stack Overflow

React: how to render data into a component?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related