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

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.

CodePudding user response：

Close.

First, you want .map(), not .forEach(). The latter just iterates but doesn't return anything, whereas the former returns a new array (with the same size as the original) "mapped" to a new element structure (in this case JSX elements).

Aside from that... The use of curly braces {} here creates a function body, which in this case consists of a JSX element but doesn't return anything:

{
  <div className={classes.SearchResults}>
    {results[element]}    
  </div>
}

You can return the element explicitly:

{
  return (<div className={classes.SearchResults}>
    {results[element]}    
  </div>);
}

Or use an implicit return from the arrow function by using parentheses () around it to have the whole function be just one statement (instead of an explicit function body):

(
  <div className={classes.SearchResults}>
    {results[element]}    
  </div>
)

Additionally... The use of results[element] looks wrong here. The first callback argument to .map() isn't the index, it's the element itself. I suspect you want this:

(
  <div className={classes.SearchResults}>
    {element}    
  </div>
)

As a final note, in React you'll see warnings if you iterate over an array like this to produce JSX but don't supply a key property to the JSX element. If the element object has an identifier, such as an id property, you can use that:

(
  <div key={element.id} className={classes.SearchResults}>
    {element}    
  </div>
)

But failing that, you can always rely on the second argument to the .map() callback, which is just the array element's index:

{results.map((element, i) => (
  <div key={i} className={classes.SearchResults}>
    {element}    
  </div>
))}

CodePudding user response：

forEach just runs your callback ignoring the return value

map is used to transform and return a new value for each iteration, hence you can use the following instead:

{results.map((element, index) => {
   return (
      <div className={classes.SearchResults} key={index}>
          {results[element]}    
      </div>
   )
})}

CodePudding user response：

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