Intro to React > JavaScript Primitives in JSX

JavaScript primitives in JSX

Let's take a look at how JSX renders various JavaScript primitives.

You'll notice that Strings and Numbers render as you would expect. But Booleans, Null, Undefined and function declarations do not render at all. These are all valid React nodes.

An array will render each element in the array, which is useful when combined with map (see rendering lists).

The last child renders a JSX expression inside curly braces. This acts as a reminder that JSX expressions are JavaScript expressions in JSX, and is useful for conditional rendering in our next lesson.

Lesson 8/22

export default function App() {
  return (
    <>
      {" "}
      <h1> Primitives in JSX </h1>
      <ul>
        <li>String: {"hello"}</li>
        <li>Number: {99}</li>
        <li>Boolean: {true}</li>
        <li>Null: {null}</li>
        <li>Undefined: {undefined}</li>
        <li>Array: {[1, 2, 3, 4, 5]}</li>
        <li>Function: {function () {}}</li>
        <li> Array of Nodes: </li>
        <ul>
          {[
            <li> hello </li>,
            <li> wow </li>,
            <li> cool </li>,
            <li> amazing </li>,
            <li> woohoo </li>,
          ]}
        </ul>
        {/* JSX expressions can also be rendered inside curly braces */}
        <li>Node: {<span>I'm a Node</span>}</li>
      </ul>
    </>
  );
}

Open Sandbox