Реакция -Div существует, но пуст и больше проблем

Question

Я использую приведенный ниже код для извлечения списка данных из файла JSON, чтобы заполнить веб-страницу News, Однако, с тем, что у меня есть, div пусто, когда я проверяю это, и я не уверен, почему. Когда я пробую другие решения, я получаю ошибки или такой же вывод.

const newsList = labNewsJson['news']

class News extends Component {
  render() {
    const news = newsList.map((newsItem) => {
      <div>{newsItem}</div>
    });

    return (
      <div className='container'>
        <h1>Lab News</h1>
        <div>{news}</div>
      </div>
    );
  }
}

export default News;

Answer 1

Вам нужно добавить возврат к вашей функции карты.

const news = newsList.map((newsItem, index) => {
  return <div key={index}>{newsItem.title}</div>
});

Answer 2

Когда вы используете {}, функция map ничего не возвращает. У вас есть два варианта:

1- Попробуйте использовать () вместо {}:

const news = newsList.map((newsItem) => (
    <div>{newsItem}</div>
))

2- возвращать элемент в каждой итерации:

const news = newsList.map((newsItem) => {
    return <div>{newsItem}</div>
})