Guy Guy - 2 months ago 11
React JSX Question

React: is there a different between using curly brackets and omitting them?

With curly brackets:

<div theBestProp={"diagonal-texture"}> ...


vs without curly brackets:

<div theBestProp="diagonal-texture"> ...


Same question is relevant for the "ref" prop:

With curly brackets (from React's docs), accessible through this._input:

<div ref={(c) => this._input = c} ...


vs without curly brackets, accessible through this.refs.commander:

<div ref="commander"> ...


I've also noticed that everything comes out as strings. For this:

<PriceOption id="1" yes="true" price="free" audience="for individuals" plan="Starter" />


The props will be this (all strings):

{
"id": "1",
"yes": "true",
"price": "free",
"audience": "for individuals",
"plan": "Starter"
}


So I guess only way to pass booleans and numbers is the following:

<PriceOption id={1} yes={true} price="free" audience="for individuals" plan="Starter" />


right?

Answer

Without the curly it will be a string of diagonal-texture. With curly. React will try to evaluate it and find a string.. The end result is the same. Just that you take longer steps by telling react to evaluate it.

while the second example:

<div ref={(c) => this._input = c} 
// react will run the function inside ref, 
// the arrow function always return something, that's js not react
// this is javascript ES6, not react,  

// the function above is the same as: 
<div ref= { (c) => {                   // arrow function returns a closure
                return this._input = c // the closure is returning this._input
             }) 
}

so yeah, in react, <div ref={} /> this will tell react to evaluate whatever inside the curly.