iterating through an array of objects and displaying the items [REACT JS]

Question

I'm trying to iterate through an array of objects, displaying the results inside divs but something is not working as intended. When I console log it seems to retrieve the data and show it.

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>
    );
}

nothing really shows up, but when i do:

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

it works and consoles the right info.

Can anyone spot the mistake or help out?

Please ignore the naming convention.

Nikita Madeev · Accepted Answer · 2020-08-04 14:49:30Z

3

You need return array of JSX.Element from renderData. In your case you return undefined. Return a new array of JSX.Element with map instead forEach, which returns nothing.

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>
        );
    });
};

edited Aug 4, 2020 at 14:49

answered Aug 4, 2020 at 14:44

Nikita Madeev

4,49012 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

UnluckyLAD Over a year ago

Awesome! Thank you.

Collectives™ on Stack Overflow

iterating through an array of objects and displaying the items [REACT JS]

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related