What do curly braces mean in JSX (React)?

by

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

More Related Contents:

  1. Why shouldn’t JSX props use arrow functions or bind?
  2. How to add function in JSX?
  3. setState doesn’t update the state immediately
  4. How to update nested state properties in React
  5. Loop inside React JSX
  6. How to scroll to an element?
  7. Render HTML string as real HTML in a React component
  8. React – User-Defined JSX Components Not rendering
  9. Concatenating variables and strings in React
  10. What is the difference between using constructor vs state = {} to declare state in react component?
  11. How to render HTML string as real HTML?
  12. Can I use arrow function in constructor of a react component?
  13. React.js: Identifying different inputs with one onChange handler
  14. ES6 array map doesn’t return anything: ReactJS
  15. setState() inside of componentDidUpdate()
  16. Arrow functions and the use of parentheses () or {} or ({})
  17. ESLint with React gives `no-unused-vars` errors
  18. Why do I have to .bind(this) for methods defined in React component class, but not in regular ES6 class
  19. Why React Hook useState uses const and not let
  20. where is create-react-app webpack config and files?
  21. What does calling super() in a React constructor do?
  22. Passing props into external stylesheet in React Native?
  23. Importing multiple files in react
  24. ES6 functions, arrow functions and ‘this’ in an ES6 class [duplicate]
  25. React.createClass vs. ES6 arrow function
  26. How do you import a javascript package from a cdn/script tag in React?
  27. React.js ES6 avoid binding ‘this’ to every method
  28. React functional component default props vs default parameters
  29. How to Call a Function inside a Render in React/Jsx
  30. Exporting functions with reactjs and babel

Leave a Comment