CODEWITHSUNDEEP
reactjs
Lahey Corey
Lahey Corey

Reputation: 103

How to render objects inside an objects array

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

Upvotes: 0

Views: 70

Answers (4)

Nithish
Nithish

Reputation: 5999

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>

Upvotes: 1

Denismr7
Denismr7

Reputation: 639

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>;
};

Upvotes: 1

Jes&#250;s Dom&#237;nguez
Jes&#250;s Dom&#237;nguez

Reputation: 414

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>
  );
};

Upvotes: 1

Kevin.a
Kevin.a

Reputation: 4296

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>
  ))
};

enter image description here

Upvotes: 1

Related Questions