I found this code in one a tutorial.
const renderApp = (Component) =>
render(
<Provider store={store}>
<AppContainer>
<Component />
</AppContainer>
</Provider>,
document.getElementById('root')
);
My question is shouldnt the return value be wrapped in braces? because arrow functions return whats next to => if nothing is metnioned ?
const renderApp = (Component) => (
render(
<Provider store={store}>
<AppContainer>
<Component />
</AppContainer>
</Provider>,
document.getElementById('root')
);
)
shouldn't it have braces to wrap contents ?
The right hand side of an arrow function can be either:
{ and } (which are braces)return statement in the block saysYou need to wrap the expression with parenthesis (( and )) if it is an object literal because object literals are delimited with braces.
() => { foo: 123, bar: 456 }; // This is an error
If you wrote the above, the { and } would be interpreted as a block and not an expression to create an object.
() => ({ foo: 123, bar: 456 });
Adding parenthesis tells the JS parser that it is an expression and not a block.
Since your expression doesn't start with a {, it won't be treated as a block so there is no need for parenthesis.
The first code snippet, after "=>" its empty, wont JS compiler insert ; and end it there ?
No. Automatic semi-colon insertion only occurs in places which could be the end of something. It won't happen in after => because there must be something on the right-hand side of =>.
There's no need to wrap it within braces because a single line statement gets returned implicitly. You however can do it yourself, it isn't incorrect, just that it's a bit of syntactic sugar