What do curly braces mean in JSX (React)?
ecmascript-6, javascript, jsx, reactjs
Solution
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. Because if you use the standard double quote syntax like so:
`var css = { color: red }`
`<h1 style="css">Hello world</h1>`
JSX doesn't know you meant to use the variable `css` in the style attribute instead of the string. And by placing the curly braces around the variable `css`, you are telling the parser "take the contents of the variable `css` and put them here". (Technically its evaluating the content)
This process is generally referred to as "interpolation".
Problem
For an example, to set a style in react you could do `var css = {color: red}` and `<h1 style={css}>Hello world</h1>` Why do you need the curly braces around css in the second code snippet?