Как визуализировать дочерние компоненты React из вызова функции?

Question

Я пытаюсь вызвать функцию row () в моем компоненте приложения, которая будет отображать дочерние компоненты PhoneBook:

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>
  )
}

Где peopleToShow - массив, состоящий из:

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"}

Дочерний компонент PhoneBook определяется как:

import React from 'react';

const PhoneBook = ({name, number}) => {
    return (
        <div>{name} {number}</div>
    );
}

export default PhoneBook;

Почему дочерние компоненты PhoneBook не отображаются?

Answer 1

Я думаю, вы просто забыли вернуться из своей функции,

const rows = () => {
  //return here
  return personsToShow.map(person => 
    <PhoneBook key={person.number} name={person.name} number={person.number}/>
  );
}  

Демо

Примечание: Вы должны предоставить уникальный key.Ваш ключ не уникален здесь, вы можете использовать номер (в основном уникальный) для вашего ключа как key={person.number}.

Answer 2

Пропустить {} в функции стрелки, чтобы вернуть выражение.

  const rows = () =>
    personsToShow.map(person => 
      <PhoneBook key={personsToShow.length+1} name={person.name} number={person.number}/>
    );

Answer 3

Не используйте fuction, используйте переменную, потому что анонимные функции будут создаваться при каждом повторном рендеринге

import React from 'react';
import PhoneBook from './components/PhoneBook';

const App = () => {
  const rows = personsToShow.map((person, index) => // removeed function
     <PhoneBook key={index} name={person.name} number={person.number}/>
     //__________^ use proper key
  );


  return (     
    <div>
      {rows} // removed function call
    </div>
  )
}