Проблема с отрисовкой списка в React

Question

Начал недавно изучать реакт, по ролику Ulbi TV. В ролике он показывал, что можно использовать Array.map() для вывода данных списком (аналог v-for в Vue). Так я с точностью повторил его код (упрощаю его тут, тк там он в разных компонентах. Но у меня WebStorm ругается (Expression statement is not assignment or call) а сам реакт выводит такую ошибку (в фрагмент пробовал оборачивать, ничего не изменилось. Сам ролик 21 года, может быть с выходом 18 версии что-то изменилось, но ничего связанного со списками не нашел (в офф документации написано использовать map вне return записывая его в переменную, но это же неудобно

Вот код


function App() {
  const [posts, setPosts] = useState([
    {title: "title 1", body: "body 1", id: 1},
    {title: "title 2", body: "body 2", id: 2},
    {title: "title 3", body: "body 3", id: 3},
  ])
  return (
    <div className="App">
      {posts.map(post => {
        <h1>{post.title}</h1>
        <p>{post.body}</p>
      })}
    </div>
  );
}

export default App;

Answer 1

Метод map должен возвращать элементы. Вы пропустили return внутри JSX элемент должен быть обернуть в ОДИН тег div, span и т.д. Когда вы уверены, что ваш код прекрасно встроится в DOM, возвращаемые элементы можно обернуть в <></>

function App() {
  const [posts, setPosts] = useState([
    {title: "title 1", body: "body 1", id: 1},
    {title: "title 2", body: "body 2", id: 2},
    {title: "title 3", body: "body 3", id: 3},
  ])
  return (
    <div className="App">
      {posts.map(post => {
        return (
          <>
            <h1>{post.title}</h1>
            <p>{post.body}</p>
          </>
        )
      })
      }
    </div>
);
}

export default App;

БЛОГ НА HUSL

Проблема с отрисовкой списка в React

Ответы (1 шт):