итерация по массиву объектов и отображение элементов [REACT JS]

Question

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

const example =
      {
          "example": [
             {
               "test": "test",
               "img": "img.png",
               "song": "song title"
             },
             {
               "test": "test2",
               "img": "img.png2",
               "song": "song title2"
             }
           ]
         }

     const renderData= () => {
          example.example.forEach(function (arrayItem) {
            const test= arrayItem.test
            const img= arrayItem.img
            const song= arrayItem.song
            
            return (
              <div className="test">
              <div className="test">
                <div className="test">
                  <img
                    src={img}
                    alt="sunil"
                  />
                </div>
                <div className="test">
                    {test}
                    <span className="test">
                    </span>
                  <p>{song}</p>
                </div>
              </div>
            </div>
            );
          });
        };


return (
      <div
     
          {renderData()}
    
      </div>
    );
}

на самом деле ничего не отображается, но когда я это делаю:

     example.example.forEach(function (arrayItem) {
      var x = arrayItem.test+ arrayItem.img+ arrayItem.song;
      console.log(x);
  });

, он работает и выводит правильную информацию.

Может ли кто-нибудь обнаружить ошибку или помочь?

Пожалуйста, не обращайте внимания на соглашение об именах.

Answer 1

Вам нужен массив возврата JSX.Element из renderData. В вашем случае вы вернете undefined. Вернуть новый массив JSX.Element с map вместо forEach , который ничего не возвращает.

const renderData = () => {
    return example.example.map((arrayItem, i) => {
        const test = arrayItem.test;
        const img = arrayItem.img;
        const song = arrayItem.song;

        return (
            <div key={i} className="test">
                <div className="test">
                    <div className="test">
                        <img src={img} alt="sunil" />
                    </div>
                    <div className="test">
                        {test}
                        <span className="test"></span>
                        <p>{song}</p>
                    </div>
                </div>
            </div>
        );
    });
};