Почему данные, возвращаемые функцией, не отображаются в реакции?

Question

По общему признанию, учимся реагировать & jsx, но не могу понять, почему это не рендерится:

function generateItem(item){
  return `<li><a href=${item.url}>${item.text}</a></li>`;
}

function MyList ({items}){
  return (
      <div className="list">
        <ul>
          {items.forEach(item => {
            generateItem(item);
          })}
        </ul>
      </div>
  );
};

Все выходные данные (если они включены в мое приложение) - пустой список:

<div class="list"><ul></ul></div>

Я уверен, что это что-то базовое и фундаментальное.Но я здесь.

https://codesandbox.io/s/relaxed-stallman-81ety

Answer 1

items.forEach ничего не возвращает ... вещи в фигурных скобках в jsx будут в конечном итоге преобразованы в аргумент при вызове React.createElement, поэтому они должны быть выражением и возвращать значение.(отметьте здесь переданную версию )

Попробуйте items.map(item => generateItem(item)) или просто items.map(generateItem).

- вот ваш отредактированный код (я также изменил generateItem, чтобы он возвращал jsx вместострока)

https://codesandbox.io/s/frosty-sutherland-fp7kh