Make a new div element for each element in an array with JSX?

I am trying to make a div element for each element in an array using reactjs JSX. I was not sure how to really go about this but I tried doing this:

{results.forEach(element => {
               <div className={classes.SearchResults}>

                {results[element]}    

                </div>

})}

This didn’t work but I am fairly confident that it is something along these lines. I receive no errors results is an array element I defined elsewhere and that is working completely. The only issue is displaying a new div element for each of elements within the results array. If you need more code I am happy to give you it though I think this should be a sufficient amount.

Answer

You’re close, but you’re using the wrong array method here. Array.map() returns a new array, and you can use that to return an array of divs to render for each item in the results array.

For more details, take a look here: https://reactjs.org/docs/lists-and-keys.html