How to render all image srcs on react

I have a product object and inside that object has an answer object and inside that has a photo property where some answers have photos. I tried creating a method that loops through every images array and creates and img tag and includes that src link but for some reason its not showing any image. I even console logged it and the links were appearing. Is there some simple way to do this that I’m missing?

import React, { useState } from 'react';

const Answer = ({answerObj}) => {
  
  const handleImages = () => {
    answerObj.photo.images.forEach(pic => {
      console.log(pic);
      return (
        <img src={pic}
        alt="some photo" 
        width="200px"
        height="200px"
        />
      );
    })
  };

  return (
    <div>
        <div className="photoInfo">
          <br />
          <p>{answerObj.photo.photoBody}</p>
          <br />
          {answerObj.photo.images.length > 0 ? (
          <div>
            {handleImages()}
            // commented out <img src={answerObj.photo.images[0]} 
            // commented out alt="some photo" 
            // commented out width="200px" 
            // commented out height="200px" />
          </div>): null}
        </div>
      </div>
  );
};

export default Answer;

DummyData:
const dummyData = [
{
    productId: 100,
    questions: [{
      questionId: 10,
      helpfulCount: 67,
      body: 'Is this watch waterproof?',
      answers: [{
        answerId: 500,
        body: 'This works up to 5 meters underwater.',
        user: 'User231',
        photo: {
          photoBody:'Here are some photos of the waterproof watches:',
          images: ['some link', 'some link', 'some link'],
          photoHelpfulCount: 33
        },
        helpfulCount: 43,
        date: 'May 1, 2019',
        isSeller: true,
        isReported: false
    },
    {
      answerId: 501,
      body: `To a degree, I wouldn't test it out.`,
      user: 'User420',
      photo: {
        photoBody:'',
        images: [],
        photoHelpfulCount: -1
      },
      helpfulCount: 0,
      date: 'May 3, 2019',
      isSeller: false,
      isReported: false
    },
    {
      answerId: 502,
      body: 'I tested it out 7ft underwater and so far so good.',
      user: 'User367',
      photo: {
        photoBody:'Here is a photo of my watch underwater:',
        images: ['some link'],
        photoHelpfulCount: 5
      },
      helpfulCount: 8,
      date: 'May 6, 2019',
      isSeller: false,
      isReported: false
    },
    { 
      answerId: 503,
      body: 'Tried it out at a water park and it stopped working.',
      user: 'User514',
      photo: {
        photoBody:'Here are some photos of the aftermath:',
        images: ['some link', 'some link'],
        photoHelpfulCount: 2
      },
      helpfulCount: 4,
      date: 'May 1, 2019',
      isSeller: false,
      isReported: false
    }],
    }],
}

Answer

Map and return the mapped array instead of using forEach.

Also, it would be preferable to use JSX syntax (equivalent to React.createElement) instead of invoking a function that returns a component. (Invoking a standard function that returns JSX can cause problems with hooks, among other things)

const Answer = ({ answerObj }) => {
    return (
        <div>
            <div className="photoInfo">
                <br />
                <p>{answerObj.photo.photoBody}</p>
                <br />
                {answerObj.photo.images.length > 0 ? (
                    <div>
                        {answerObj.photo.images.map(pic => (
                            <img src={pic}
                                alt="some photo"
                                width="200px"
                                height="200px"
                            />
                        )
                        )}
                    </div>)
                    : null}
            </div>
        </div>
    );
};

const AnswerPhoto = ({ pic }) => (
    <img src={pic}
        alt="some photo"
        width="200px"
        height="200px"
    />
);
const Answer = ({ answerObj }) => {
    return (
        <div>
            <div className="photoInfo">
                <br />
                <p>{answerObj.photo.photoBody}</p>
                <br />
                {answerObj.photo.images.length > 0 ? (
                    <div>
                        {answerObj.photo.images.map(pic => <AnswerPhoto pic={pic} />)}
                    </div>)
                    : null}
            </div>
        </div>
    );
};

Advertisement

Answer