Define variable and return component from an arrow function

Question

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

What is the error message it gives you? – Sep 08 '16 at 03:29 — , Sep 08 '16 at 03:29

sdgluck · Accepted Answer · 2016-09-07T15:47:24.510

3

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

edited Sep 07 '16 at 15:47

answered Sep 07 '16 at 15:39

sdgluck

24,894
8
75
90

Right. `x => y` is identical to `function (x) { return y; }`. – John Weisz Sep 07 '16 at 15:41

score 2 · Answer 2 · edited May 23 '17 at 12:01

2

Alternatively, you could omit return and block braces, but the function body should be one liner with implicit return:

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

More about implicit return here

edited May 23 '17 at 12:01

Community

1
1

answered Sep 07 '16 at 15:42

Lyubomir

19,615
6
55
69

score 2 · Answer 3 · answered Jul 25 '21 at 12:30

2

here is an example using jsx component

const App = () => {
     const firstName = "abey"
     const lastName = "bruck"

     return(
        <p>hello {`${firstName} ${lastName}`}</p> 
     )

}

answered Jul 25 '21 at 12:30

Abey Bruck

532
5
7

score 1 · Answer 4 · answered Mar 25 '18 at 07:03

Normally i use arrows when either

It's a single instruction function
I need the this remain referencing to the calling context when the arrow is a callback etc...

However the accepted answer states that

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

which is incorrect because we have the comma (,) operator and you can still use implicit return. Yet, if you need variable declarations you can not do it with var, let or const keywords while using the comma operator. However you can still declare a variable within the arrow function's scope as an unused argument. Let's see how you may do your code without using braces and explicit return.

render() {
  return(
    <div>
      {array.map((e, i, _, disturbingVariable) => (
        disturbingVariable = 100 + i, // comma here
        <MyComponent disturbingVariable={disturbingVariable} />
      ))}
    </div>
  )
}

Abhishek Jain · Answer 5 · 2016-09-07T16:28:09.390

0

This is because you are trying to implicitly return value from a function instead of explicitly by using a return statement. If you want to return a value as well as do other operations, you will have to do something like this:-

Notice () converts to {} and use of return statement to explicitly return the component.

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

edited Sep 07 '16 at 16:28

answered Sep 07 '16 at 15:43

Abhishek Jain

2,957
23
35

*"you are trying to implicitly return an object (by using ())"* – what ? – Mulan Sep 07 '16 at 16:22
Sorry, maybe I didn't phrase it properly. I meant that OP was implicitly returning a value in an arrow function rather than explicitly via a return statement. () => value is same as () => { return value; } – Abhishek Jain Sep 07 '16 at 16:27

Define variable and return component from an arrow function

5 Answers5