Search code examples
reactjsarraysantd

Iterate through array within React Component render's function

I have an array that I've confirmed has content, and the keys are correct.

I'm trying to iterate through that array and put an image via the item.url key into an Antd Card element. Below is the code I have. It compiles fine, but there is no output.

What needs to change to iterate over the array AND display the results of the Card elements thats being created?

        return(<div>{this.imageDetails.forEach((item) => {
                    <Card hoverable cover={<img src={item.url}/>}>
                        <Meta title="Unoptimized Image" description="Need to optimize"/>
                    </Card>})}
              </div>)
    }
Solution

  • Use map function to return component like so

    return(
  <div>
      {this.imageDetails.map(item => (
          <Card hoverable cover={<img src={item.url}/>}>
              <Meta title="Unoptimized Image" description="Need to optimize"/>
          </Card>)}
  </div>
);