I'm trying to call a function, rows(), in my App component, which will render PhoneBook child components:
import React from 'react';
import PhoneBook from './components/PhoneBook';
const App = () => {
const rows = () => {
personsToShow.map(person =>
<PhoneBook key={personsToShow.length+1} name={person.name} number={person.number}/>
);
}
return (
<div>
{rows()}
</div>
)
}
Where personsToShow is an array consisting of:
0: {name: "Arto Hellas", number: "000-000-0000"}
1: {name: "Ada Lovelace", number: "39-44-5323523"}
2: {name: "Dan Abramov", number: "12-43-234345"}
3: {name: "Mary Poppendieck", number: "39-23-6423122"}
The PhoneBook child component is defined as:
import React from 'react';
const PhoneBook = ({name, number}) => {
return (
<div>{name} {number}</div>
);
}
export default PhoneBook;
How come the PhoneBook child components do not get rendered?
I think you just forgot to return from your function,
const rows = () => {
//return here
return personsToShow.map(person =>
<PhoneBook key={person.number} name={person.name} number={person.number}/>
);
}
Note: You should provide the unique key
. Your key is not unique here, you can use number (mostly unique) for your key as key={person.number}
.