CODEWITHSUNDEEP
javascripthtmlarraysreactjs
Airlo
Airlo

Reputation: 111

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.

Upvotes: 1

Views: 3648

Answers (4)

Mike Gledhill
Mike Gledhill

Reputation: 29191

Another small example... this displays a <div> containing one child <div> per Excel Worksheet in my array.

I also have a 0-based "selectedWorksheetInx" value which keeps track of which tab has been selected.

<div className="excelWorksheetsWrapper">
    { worksheets?.map(sheet => (
        <div className={ index == selectedWorksheetInx ? "selectedTab" : ""}
             onClick={() => setSelectedWorksheetInx(index)}>
            {sheet.worksheetName}    
        </div>
    ))}
</div>

Here's how it looks, and what it renders:

enter image description here

Upvotes: 0

Karen Grigoryan
Karen Grigoryan

Reputation: 5432

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

Upvotes: 1

David
David

Reputation: 218877

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

Upvotes: 5

Ali Nauman
Ali Nauman

Reputation: 1677

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

Upvotes: 1

Related Questions