Map () не возвращает JSX при вызове через функцию

Question

Я пытаюсь вывести кучу li при переборе функции карты. Проблема заключается в том, что код работает, когда непосредственно помещается в оператор рендеринга return, но перестает работать, если я организую его в вспомогательную функцию и вызываю функцию в операторе возврата.

WORKS:

const UserList = (props) => {
  if(props.items.length === 0){
    return (
      <div className="center">
        <h2>No users found.</h2>
      </div>
    );
  }
}

return <ul className="users-list">
  {
    props.items.map(user => {
      console.log(user.name);
      return <li>{user.id}</li>   
    })
  }
</ul>

НЕ РАБОТАЕТ:

const UserList = (props) => {
  if(props.items.length === 0){
    return (
      <div className="center">
        <h2>No users found.</h2>
      </div>
    );
  }
}

const renderList = () => {
  props.items.map(user => {
    console.log(user.name);
    return <li>{user.id}</li>   
  })
};

return <ul className="users-list">
  {renderList()}
</ul>

Answer 1

Вам необходимо иметь инструкцию возврата для вашего метода.

const { items } = props; 

const renderList = () => {
  return items.map(user => {
      return <li>{user.id}</li>   
    }
  )
};

Или короткую версию с меньшим количеством кода. В функциях со стрелками вам не нужно записывать фигурные скобки и оператор return, если вы только возвращаете результат без дальнейшей обработки.

const { items } = props; 

const renderList = () => items.map(user => <li>{user.id}</li>);

Answer 2

сделать это:

const renderList = () => {
    return props.items.map(user => {
        console.log(user.name);
        return <li>{user.id}</li>   
      }
    )
};