passing array of objects from parent component to child component

Question

this is a very simple react app with just App component and Child component. I am passing objects individually to the Child component using .map function in the parent. Each object is received in child(console), but I cannot get the object fields to output/display on browser or console, it just showing as a blank screen, also does not show any errors.

each person is recieved but individual fields cannot be from access like {person.Name} in the child component, I have also tried destructing the prop, still does not work

I have looked at other questions Passing data from Parent Component to Child Component

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

before asking this question plus I have searched a lot online for solution

PARENT COMPONENT

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

function App() {

  let persons = [
                {
                  Name: 'Bill Gates',
                  id: 432,
                  Place: 'USA'
                },
                {
                  Name: 'Danny Archer',
                  id: 34,
                  Place: 'Blood Diamond'
                },
                {
                  Name: 'Iphone X',
                  id: 2018,
                  Place: 'USA'
                },
                {
                  Name: 'React App',
                  id: 111,
                  Place: 'Front End Programming'
                },
                {
                  Name: 'Honda CBR 600RR',
                  id: 100,
                  Place: 'Bike'
                },
  ]


   console.log(persons);

  return (
    <div className="App">
      {
        persons.map(person=>(<Child person = {person} key={person.id}/>))
      }
      
    </div>
  );
  }

export default App;

CHILD COMPONENT

import React from 'react'

function Child(person) {

    // console.log(person)
    
  return (
    <div >
      <h1>{person.Name}</h1>
    </div>
  )
}

export default Child

Please do not edit questions to change them into a different question. It is unfair to those who have already answered the question you asked, and confusing to others who may be confused at answers that do not address the question. — Ryan M
– Ryan M ♦, Commented Apr 2, 2022 at 7:07

iamdipanshus · Accepted Answer · 2022-02-19 05:13:06Z

0

Props is an object, not the exact value you were expecting

import React from 'react'

/// change this line
function Child({person}) {

    // console.log(person)
    
  return (
    <div >
      <h1>{person.Name}</h1>
    </div>
  )
}

export default Child

In your code, function Child(person) this person, is an object containing the props you pass like, for example Child(person={person} someData={someData})

so, person param in function will be

{
   person: person,
   someData: someData
}

edited Feb 19, 2022 at 5:13

answered Feb 19, 2022 at 5:07

iamdipanshus

6005 silver badges19 bronze badges

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

Comments

ouflak · Accepted Answer · 2022-02-19 12:27:09Z

0

If you console.log person in child component you will get:

person: { person: { name, id, place }}

because the first parameter will get all of the properties from the parent.

So instead of doing this --> function Child(person), you can do something like this --> function Child({person}). So this will destructure your prop object & you will get your person object!

edited Feb 19, 2022 at 12:27

ouflak

2,56310 gold badges46 silver badges53 bronze badges

answered Feb 19, 2022 at 5:47

Shubham

11 bronze badge

2 Comments

Ash Sharma Over a year ago

thanks for your feedback , I understood that part, I have re-edited the question to the main problem, which is unresolved, can you please check that.

Shubham Over a year ago

you can add optional chaining for that! For eg: posts?.map(post => <Component>) then this error will not occur.

Collectives™ on Stack Overflow

passing array of objects from parent component to child component

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related