How to render objects inside an objects array

Question

I have an array of 3 objects

  const parts = [
    {
      name: "Fundamentals of React",
      exercises: 10
    },
    {
      name: "Using props to pass data",
      exercises: 7
    },
    {
      name: "State of a component",
      exercises: 14
    }
  ];

I can get all objects content on the console

 parts.forEach((value) => {
   console.log(value);});

I want to use the Content component to display the content of the array of objects, but I can´t figure out how to do it.

On the code below I try to log the props, but I am not getting any, so nothing is rendered.

const Content = (props) => {
  console.log(props);
  return <div><h1>{props.parts}</h1></div>;

Here is my code in code sandbox

Dharman · Accepted Answer · 2021-04-22 12:00:21Z

1

I see in your code that you don't have passed the parts array to the Content component. In order to receive the props you should do something like this:

<Content parts={parts} />

Then you'll see the array in the Content's console.log() and therefore you'll be able to render the array in the component. For example

const Content = (props) => {
  console.log(props);
  return <div>{props.parts[0].name}</div>;
};

edited Apr 22, 2021 at 12:00

Dharman♦

33.9k27 gold badges103 silver badges157 bronze badges

answered Apr 22, 2021 at 11:54

Denismr7

6396 silver badges3 bronze badges

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

Comments

Kevin.a · Accepted Answer · 2021-04-22 11:54:13Z

1

First of all pass parts as a prop in App.js

  <Content parts={parts}/>

Now we have access to the parts array in Content. Now all you have to do is use a map function to render the array items.

const Content = (props) => {
  console.log(props.parts);
  return props.parts.map(item => (
    <div>{item.name}</div>
  ))
};

answered Apr 22, 2021 at 11:54

Kevin.a

4,34615 gold badges52 silver badges93 bronze badges

Comments

Jesús Domínguez · Accepted Answer · 2021-04-22 11:58:00Z

1

You have to pass the partsas prop to the Content

<Content parts={parts} />

then just iterate the parts and show their content

const Content = ({ parts }) => {  
  return (
    <div>
      {parts.map((part, index) => (
        <div key={index}>
          <h1>{part.name}</h1> 
          <p>{part.exercises}</p>
        </div>
      ))}
    </div>
  );
};

answered Apr 22, 2021 at 11:58

Jesús Domínguez

4143 silver badges8 bronze badges

Comments

Nithish · Accepted Answer · 2021-04-22 12:09:13Z

When we want to render some elements from an array of objects, Array.map is the method that is useful. The problem with Array.forEach is that it will not return anything, it'll be useful when we want to manipulate the array objects in-place while looping.

We can pass the parts to the Content component as prop like below

//Pass `parts` array as `data` to `Content` component
<Content data={parts}/>

and the passed data can be accessed in different ways

const Content = ({ data }) => {
  //use the passed `parts` array as `data` for rendering or for any other purposes
}

OR

const Content = props => {
  //`parts` array can be accessed using `props.data`
}

const parts = [
    { name: "Fundamentals of React", exercises: 10},
    { name: "Using props to pass data", exercises: 7 },
    { name: "State of a component", exercises: 14 }
];

const Content = ({ data }) => {
  return data.map(obj => (
    <div key={obj.name}>
      {obj.name}: {obj.exercises}
    </div>
  ))
}

const App = () => {
  return (<div>
    <header>Header</header>
    <Content data={parts}/>
  </div>)
}

ReactDOM.render(<App />, document.getElementById("react"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>

<div id="react"></div>

Collectives™ on Stack Overflow

How to render objects inside an objects array

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related