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

Answer 1

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
}

Answer 2

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!