Passing a list through react components

////////////////// NameList.js///////////////////////////////

import React from ‘react’
import PersonList from ‘./PersonList’;

function NameList() {
const persons = [{ name: ‘amal’, age: 11 }, { name: ‘bala’, age: 11 }, { name: ‘cathy’, age: 11 }]
const personlist = persons.map(person => (
<PersonList person={person} />
))
return (
<div>
{
personlist
}
</div>
)
}

export default NameList

/////////////////////////PersonList.js///////////////////////////

import React from ‘react’

function PersonList({ person }) {

return (
<div>

<h2>{person.name} {person.age}</h2>
</div>
)
}

export default PersonList

/////////////////////////////////////////////////////////////////////////////////////

I am trying to pass a list from NameList to PersonList but it shows an error name is undefined

TypeError: Cannot read property ‘name’ of undefined

Hey @leonjosepulikkottil, the issue is that you cannot access the “name” key in the dictionary the way you are trying to. Look up “How to use a Dictionary in JavaScript” and you will see the appropriate way to get access to the keys and values. 

This is usually done by something like: “dictonary[“Value_of_Key”]” so in your case “person[“name”]”.

No still it has the same error

thanks anyway @logankilpatrick