0

I am learning react native and ES6. I read many documents but sometimes get confused with the code. for instance, here:

return (
      <View {...this.panResponder.panHandlers}>
        {this.renderCards()}
      </View>
    );

I know that ... is gonna open the object and spread it as the View props, but why do we need to wrap with {}?

farmcommand2
  • 1,418
  • 1
  • 13
  • 18

2 Answers2

0

The curly braces are a special syntax to let the JSX parser know that it needs to interpret the contents in between them as JavaScript instead of a string.

You need them when you want to use a JavaScript expression like a variable or a reference inside JSX.

Portion copied from an answer to "What do curly braces mean in JSX (React)? - Stack Overflow", by Daniel Sandiego.

Scott
  • 3,736
  • 2
  • 26
  • 44
  • 1
    Just a link to another question or answer is insufficient with respect to the requirement for attribution under [CC BY-SA 3.0](//creativecommons.org/licenses/by-sa/3.0/), the license under which all user contributed content on Stack Exchange is distributed. You need something like: 'The following is from an answer to "[What do curly braces mean in JSX (React)? - Stack Overflow](https://stackoverflow.com/a/43904857)", by [Daniel Sandiego](/users/3638649/daniel-sandiego), copyright 2017, licensed under [CC BY-SA 3.0](//creativecommons.org/licenses/by-sa/3.0/)'. – Makyen Oct 19 '17 at 23:06
0

but why do we need to wrap with {}

It was simply decided that "spread props" need to be encapsulated in {}. As far as I remember, there wasn't a technical reason for that decision.

FWIW, I was in favor of omitting them.

In general whenever you are in a JSX context, { } is part of JSX. You can also have a look at the syntax spec here: https://facebook.github.io/jsx/

Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143