I'm very green at react, and I'm trying to learn the library by messing around a bit.
I'm having problems passing an object to another component. Ive created an array of objects that holds 2 string variables, 1 function and 1 int.
I'm trying to populate this inside a Grid container(Material UI framework).
When I pass the object to the other react component, it arrives as undefined. Ive tried to check if I'm passing a valid object by logging it to the console first, and it is valid.
I've also tried to refer to the properties in the component that receives the object, but the browser console throws Uncaught TypeError: Cannot read properties of undefined (reading 'person').
Does anyone know why it is being sent as undefined?
PersonList.js:
const personListe = [
{
firstName:'testFirstname',
lastName:'testLastName',
getFullName:function()
{
return `${this.firstName} ${this.lastName}`
},
age:28
}
]
export default function PersonList() {
return (
<>
<Grid container spacing={3}>
{personListe.map((person) => {
return(
<Grid item xs={3} key={person.firstName}>
<PersonCard person={person} />
</Grid>
)
})}
</Grid>
</>
);
}
PersonCard.js:
export default function PersonCard({props})
{
return (<>
{console.log(props)}
</>)
}
The PersonCard Component recieves props object which includes the person object inside it.
export default function PersonCard({person})
{
return (
<>
{console.log(person)}
</>
)
}
OR
export default function PersonCard(props)
{
return (
<>
{console.log(props.person)}
</>
)
}