When do we return with () and when do we return with {}, why?

A confusing thing is that I always mix the “()” and “{}” after “return”, could you tell me when we should use “()” and when we use “{}”? Thanks!

  **Your code so far**

const state = [];
const mapStateToProps = (state) => {
return {
  messages: state
}
}
// Change code below this line
  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36

Challenge: Map State to Props

Link to the challenge:

This is returning an object with the property messages and the value of the property set to state. You can return an object just like you can return an array:

return [0, 1, 2];

Since your example is dealing with arrow functions, and that function is returning an object, I think you might be asking about the use of parens to return an object with an implicit return? Something like:

const mapStateToProps = (state) => ({
  messages: state
});

The reason you need to wrap the curlies in parens is because if the first character after the arrow is a left curly then JS thinks you are defining a function body instead of doing an implicit return. So you have to but the parens around the object so JS understands you want to return the object instead of defining the function body.

1 Like

Let’s see the example following

That image of code you posted is returning JSX. It’s important to remember that JSX is not valid javascript. It needs to be transformed (or compiled) into javascript. The FCC react challenges are automatically doing this for you behind the scenes. When it comes to JSX, I believe that the parens are actually not required, so you could remove them from the return statement. But I think it is considered best practice to wrap multi-line JSX with parens.

1 Like

Thanks, get it , I’ll try more to understand it