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