How to pass Array of Objects from Parent Component to Child Component in react

Question

I'm working on a react project.

I have an array of objects in Parent component now how to pass an array of objects from parent to child in react

Parent.Component

import React from 'react';
import './App.css';
import Child from './Child/Child';

function App() {
  const students = [
    {
      name: "Mark",
      age: 21
    },
    {
      name: "Williams",
      age: 24
    }
  ]
  return (
    <div className='App'>
      <Child studentsArrayOfObject = { students }></Child>
    </div>
  )
}

export default App

Child.Component

import React from "react";
import "./Child.css";

function Child(props) {
  return (
    <div className="container">
      <div className="row">
        <div className="col-12">
          <div className="Child">
            {props.studentsArrayOfObject.map(student => (
              <li>{student}</li>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

export default Child;

It is showing Error like this: Error: Objects are not valid as a React child (found: object with keys {name, age}). If you meant to render a collection of children, use an array instead. — Hare Krishna
– Hare Krishna, Commented Mar 10, 2020 at 6:44

Amruth · Accepted Answer · 2020-03-10 06:45:21Z

2

you are not suppose to print object directly, get some property from the object, and display like below. ex:name.

{props.studentsArrayOfObject.map(student => <li>{student.name}</li>)}

answered Mar 10, 2020 at 6:45

Amruth

5,9122 gold badges30 silver badges41 bronze badges

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

Comments

joy08 · Accepted Answer · 2020-03-10 06:46:00Z

Try to fetch the properties of the objects and render it in JSX.You are trying to render the whole array as a React child. This is not valid. You should iterate through the array and render each element. Change your Child component to the following Example

import React from 'react';
import './Child.css';
function Child(props) {
    return (
        <div className='container'>
            <div className='row'>
                <div className='col-12'>
                    <div className='Child'>
                      {props.studentsArrayOfObject.map(student => (
                        <li key={student.name}>{student.name}</div>
                        <li key={student.age}>{student.age}</div>
                      ))}
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Child

Tao Zhu · Accepted Answer · 2020-03-10 06:48:30Z

0

You can not just render the student object, I changed it to student.name here.

<div className="Child">
    {/* {props.studentsArrayOfObject.map(student => (
        <li>{student}</li>
    ))} */}
    {props.studentsArrayOfObject.map(student => (
        <li>{student.name}</li>
    ))}
</div>

Here is an online demo: https://codesandbox.io/s/so-60612610-y9y5z

answered Mar 10, 2020 at 6:48

Tao Zhu

7996 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to pass Array of Objects from Parent Component to Child Component in react

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related