Например мы хотим вывести телефонную книгу
Роман - 123
Иван - 487
...
Тарас - 034
Вопрос в том как лучше делать: все в одном компоненте ContactList
function ContactList (props) {
return (
<div>
{props.contacts.map (item => <div> {item.name} - {item.phone} </ div>)}
</ div>
)
}
или разбивать ещё на ContactListItem компонент:
function ContactList (props) {
return (
<div>
{props.contacts.map (item => <ContactListItem key = {item.id} name = {item.name} phone = {item.phone} />)}
</ div>
)
}
function ContactListItem (props) {
return (
<div>
{props.name} - {props.phone} </ div>
</ div>
)
}
и почему?