Accepted 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.


In React JSX syntax, inside of curly braces, Javascript will be evaluated. As the documentation says,

To use a JavaScript expression as an attribute value, wrap the expression in a pair of curly braces ({}) instead of quotes ("").

In your first example, the expression "diagonal-texture" evaluates to the same thing as the string "diagonal-texture". Not so for the expression in the second example.

Related Query

More Query from same tag