React curly braces

JSX curly braces can be used either between an opening HTML tag and closing HTML tag or after an HTML attribute. JSX curly can convert a JavaScript number, string into a string. It works both for HTML text and HTML attribute.

const numberForHTMLText = 20;
const stringForHTMLText = "This is a string for HTML text.";

const numberForHTMLAttribute = 30;
const stringForHTMLAttribute = "This is a string for HTML attribute.";

export default function App() {
  return (
    <>
      <h1>JSX convert a JavaScript number and string into a string.</h1>

      <h2>For HTML Text</h2>
      <h3>A number for HTML text</h3>
      <p>This is a number: {numberForHTMLText}</p>
      <h3>A string for HTML text</h3>
      <p>This is a string: {stringForHTMLText}</p>

      <h2>For HTML attribute</h2>
      <h3>A number for HTML attribute</h3>
      <p number={numberForHTMLAttribute}>This is a number.</p>
      <h3>A string for HTML attribute</h3>
      <p string={stringForHTMLAttribute}>This is a string.</p>
    </>
  );
}

JSX curly braces can even convert a JavaScript object into a stirng, while it can only work for HTML style attribute with some certain properties. You can use either an object variable name or javaScript object literal.

const objectForHTMLAttribute = {
  width: 90,
  height: 90,
};

export default function App() {
  return (
    <>
      <h1>JSX convert a JavaScript number and string into a string.</h1>

      <h2>For HTML attribute</h2>
      <h3>An object for HTML attribute</h3>
      <p style={objectForHTMLAttribute}>This is an object.</p>
      <p style={{ width: 90, height: 90 }}>This is an object.</p>
    </>
  );
}

Blog

Devin Johw

Join Our Newsletter. No Spam, Only the good stuff.

Related