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, Apr 02 '22 at 07:07

iamdipanshus · Answer 1 · 2022-02-19T05:13:06.623

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
}

score 0 · Answer 2 · edited Feb 19 '22 at 12:27

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 '22 at 12:27

ouflak

2,458
10
44
49

answered Feb 19 '22 at 05:47

Shubham

1
1

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. – Ash Sharma Feb 19 '22 at 06:03
you can add optional chaining for that! For eg: posts?.map(post => ) then this error will not occur. – Shubham Feb 25 '22 at 06:12

passing array of objects from parent component to child component

2 Answers2