Rendering Dynamic Values in JSX

Runnable lesson · press Try it on the examples to edit and run them here.

Most of what you show on a screen comes from data. This lesson explains exactly what React does with each kind of value you put in braces.

What gets displayed

1
2
3
4
5
6
7
8
9
10
11
12

function App() {
  return (
    <ul>
      <li>Text: {"hello"}</li>
      <li>Number: {42}</li>
      <li>Array: {["a", "b", "c"]}</li>
      <li>Boolean: {true}</li>
      <li>Null: {null}</li>
      <li>Undefined: {undefined}</li>
    </ul>
  );
}

The last three show nothing after their labels. That is a feature: it makes conditional rendering easy.

Show an object’s fields, not the object

1
2
3
4
5

function App() {
  const person = { name: "Ada Lovelace", age: 36 };
  // {person} would throw "Objects are not valid as a React child"
  return <p>{person.name}, {person.age}</p>;
}

If you want to see an object while debugging, show it as text with JSON.stringify(person).

Formatting values

Format numbers, dates and currency before you show them. The built-in Intl and toLocaleString handle languages and regions properly:

1
2
3
4
5
6
7
8
9
10
11

function App() {
  const price = 1299.5;
  const created = new Date(Date.UTC(2026, 0, 15));

  return (
    <div>
      <p>{new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(price)}</p>
      <p>{created.toLocaleDateString("en-US", { dateStyle: "long", timeZone: "UTC" })}</p>
    </div>
  );
}

See the JavaScript lessons on Intl.DateTimeFormat and numbers for more.

The 0 mistake

The expression {count && <Message />} shows the message only when count is truthy. But when count is 0, 0 && ... evaluates to 0, and React does render the number 0:

1
2
3
4
5
6
7
8
9

function App() {
  const unread = 0;
  return (
    <div>
      <p>Unread: {unread}</p>
      <div>{unread && <b>You have mail</b>}</div>
    </div>
  );
}

Look at the preview: the second div shows a stray 0. Fix it by making the condition a real boolean:

1
2
3
4
5
6
7
8
9

function App() {
  const unread = 0;
  return (
    <div>
      <p>Unread: {unread}</p>
      <div>{unread > 0 && <b>You have mail</b>}</div>
    </div>
  );
}

Escaping is automatic

If a string contains HTML, React shows it as text:

1
2
3
4

function App() {
  const risky = "<b>not bold</b>";
  return <p>{risky}</p>;
}

This protects your users. Do not work around it unless you fully control and sanitise the HTML.

Key points

• Strings, numbers and arrays are displayed; booleans, null and undefined show nothing.
• Never render a plain object; render its fields.
• Beware {number && ...} when the number can be 0; compare with > 0.