What is wrong with curve bracket in this code of ReactJS

Question

    const timezone = {'a' : 1};
    const options = map(timezone, (val, key) => {
        <option key={val} value={val}>{key}</option>
    });
    console.log(options);  // [undefined]

With curve brackets in the arrow function, it outputs [undefined]

    const timezone = {'a' : 1};
    const options = map(timezone, (val, key) => 
        <option key={val} value={val}>{key}</option>
    );
    console.log(options);  // Array[1]

Without curve brackets in the arrow function, it outputs Array[1].

What happened between the two block of codes?

An arrow function without braces *implicitly returns whatever is in the body*. An arrow function **with** braces behaves just as a normal function would. — Aurora0001, Dec 06 '16 at 16:39
@Aurora0001 - That should really be an answer (w/ a code sample showing the simple fix). — Justin Niessner, Dec 06 '16 at 16:39
@JustinNiessner looks like I missed the gun a little bit there - 3 others have already answered and it honestly isn't worth adding yet another answer to it. — Aurora0001, Dec 06 '16 at 16:41
Possible duplicate of [Arrow function without curly braces](http://stackoverflow.com/q/39629962/218196) — Felix Kling, Dec 06 '16 at 16:49

sdgluck · Accepted Answer · 2016-12-06T16:51:47.047

The first example has no return value, the second returns implicitly, as a feature of the available arrow function syntax.

Adjust the first example so that it returns:

const timezone = {'a' : 1};
const options = map(timezone, (val, key) => {
    return <option key={val} value={val}>{key}</option>
//  ^^^^^^
});

You can read up on arrow functions on MDN...

// 1) with braces (no return):
(param1, param2, …, paramN) => { statements }

// 2) without braces (implicit return):
(param1, param2, …, paramN) => expression

// 3) equivalent to 2 (braces with return statement):
(param1, param2, …, paramN) => { return expression; }

Also take a look at "When should I use return in es6 Arrow Functions?".

score 2 · Answer 2 · answered Dec 06 '16 at 16:40

For array functions, you can omit the curly brackets as you have done in the second example if the function only contains a single statement. If you do so, the function implicitly returns the value this statement evaluates to.

If you don't omit the curly brackets, this implicit return does not take place, resulting in a return value of undefined in your example.

Read more about the semantics of arrow functions on MDN.

score 2 · Answer 3 · answered Dec 06 '16 at 16:40

Your first example does not return anything. Although it appears that your second example doesn't either, lambda functions that have no braces, and only one statement, will implicitly return the result of evaluating that statement.

Equivalence with and without braces would be...

const timezone = {'a' : 1};
const options = map(timezone, (val, key) => {
    return (<option key={val} value={val}>{key}</option>);
});
console.log(options);

and...

const timezone = {'a' : 1};
const options = map(timezone, (val, key) => 
    <option key={val} value={val}>{key}</option>
);
console.log(options);

What is wrong with curve bracket in this code of ReactJS

3 Answers3