Fellow Stranger Fellow Stranger - 2 months ago 13
React JSX Question

Define variable and return component from an arrow function

I'd like to define a variable inside a

.map()
iteration, as well as returning a component.

But having this variable inside the map doesn't work (gives me error). Is this possible at all, and if so how do I do this?

Below is a simplified example of what I'm trying to do:

render() {
return(
<div>
{array.map( (element, index) => (
let disturbingVariable = 100 + index
<MyComponent disturbingVariable={disturbingVariable} />
))}
</div>
)
}

Answer

When an arrow function has more than one statement you can no longer use the implicit return syntax.

Add block braces and a return statement:

array.map((element, index) => {
  let disturbingVariable = 100 + index
  return <MyComponent disturbingVariable={disturbingVariable} />
})

Alternatively, forgo the variable declaration and perform the addition in-place, maintaining the implicit return:

array.map((element, index) =>
  <MyComponent disturbingVariable={100 + index} />)
Comments