Categories
javascript reactjs redux

React elements and fat arrow functions

In the Redux examples, the syntax used is:

const App = () => (
<div>
<AddTodo />
<VisibleTodoList />
<Footer />
</div>
)

I was toying around with a new example app and mistyped the above code with curly brackets instead of parentheses like so:

const App = () => {
<div>
<AddTodo />
<VisibleTodoList />
<Footer />
</div>
}

I console logged both of the following and the result seemed to be the same. My question is what is the difference between these 2 and why does React like the parentheses but not the curly brackets?

TL;DR

Your first example is more or less equivalent to:

var App = function() { return <div>...</div>; };

Your second is more or less equivalent to:

var App = function() { <div>...</div>; };

React is probably complaining that nothing is being returned in the second example.

Slightly Longer Version

Let’s take React out of the equation. In es6 you can create a fat arrow function like this:

const getWord = () => {
return 'unicorn';
}

And we’re given a shortcut to do the same thing with less code:

const getWord = () => 'unicorn';

unicorn is returned even though you don’t ever explicitly type return anywhere.

In your first example, you wrapped your JSX in parenthesis. The equivalent in our simple example is:

const getWord = () => ('unicorn');

or this

const getWord = () => (
'unicorn'
);

The last four examples are equivalent. Hope that helps!