Fellow Stranger Fellow Stranger - 1 year ago 86
React JSX Question

Define variable and return component from an arrow function

I'd like to define a variable inside a

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() {
{array.map( (element, index) => (
let disturbingVariable = 100 + index
<MyComponent disturbingVariable={disturbingVariable} />

Answer Source

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} />)
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download