In React, why is the fat arrow function not working unless it is wrapped in parenthesis

Question

Now that I know that parenthesis are required to return an object literal in ES6 rather than execute the codeblock, is the following code from the same React Introduction page doing the same in the return statement? Specifically .map(item => ()) - notice the use of parenthesis and not curly braces. Thank you

class TodoList extends React.Component { render() { return (

{this.props.items.map(item => ( {item.text} ))} ) } }

because otherwise JavaScript interprets the braces as a statement block, and your intention is to return an object (literal). — trincot, Nov 08 '16 at 20:26
It's core JS - the `{}` are treated as a code block. If you want them to be treated as an object literal, you need to put them inside `()` — VLAZ, Nov 08 '16 at 20:27
To render a Javascript expression in JSX, you need to surround the expression in curly braces. — tdog, Nov 08 '16 at 20:28

score -2 · Answer 1 · answered Nov 08 '16 at 20:35

-2

It's just a shortcut. Check this example:

const fn = () => ({name:'Jhon'})

const fn2 = () => {
    return {name:'Jhon'}
}

console.log(fn()); //Object {name: "Jhon"}
console.log(fn2()); //Object {name: "Jhon"}

answered Nov 08 '16 at 20:35

Hosar

5,163
3
26
39

Thank you for this explanation Hosar - this now makes perfect sense and apologies if the question is duplicate; I serached for quite a while and couldn't find what I was looking for. I think this is because it is an ES6 syntax issue for me. Thank you – M3nd3z Nov 09 '16 at 09:03
No worries M3nd3z, I'm glad it helped you. – Hosar Nov 09 '16 at 19:40

In React, why is the fat arrow function not working unless it is wrapped in parenthesis

1 Answers1