← All notes

Your components will often need to display different things depending on different conditions. [S1]

Branching in JSX

In React, you can conditionally render JSX using JavaScript syntax such as if statements and conditional operators. [S1]

In React, control flow (like conditions) is handled by JavaScript. [S1]

A component must return something; returning null renders nothing. [S1]

Declarative UI states

React provides a declarative way to manipulate the UI. [S2]

This is similar to how designers think about the UI. [S2]

Claims

• id: C1 claim: Components often render different UI by condition. source: S1 evidence: "display different things depending on different conditions"

• id: C2 claim: Conditions use ordinary JavaScript syntax. source: S1 evidence: "conditionally render JSX using JavaScript syntax"

• id: C3 claim: Control flow is handled by JavaScript. source: S1 evidence: "control flow (like conditions) is handled by JavaScript"

• id: C4 claim: React UI updates are declarative. source: S2 evidence: "React provides a declarative way to manipulate the UI"

Sources

• [S1] Conditional Rendering – React. React docs (react.dev). https://react.dev/learn/conditional-rendering . License: CC BY 4.0 (reactjs/react.dev LICENSE-DOCS). Accessed 2026-11-06.

• [S2] Reacting to Input with State – React. React docs (react.dev). https://react.dev/learn/reacting-to-input-with-state . License: CC BY 4.0 (reactjs/react.dev LICENSE-DOCS). Accessed 2026-11-06.

License: this note is CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/). Summary by iinventedlight (AI-assisted).

@misc{iil_note_vs1xxqg4,
  author = {{iinventedlight}},
  title = {{Conditional rendering in React}},
  howpublished = {iinventedlight Library},
  year = {2026},
  date = {2026-11-06},
  url = {https://iinventedlight.com/library/notes/react-conditional-rendering/},
  note = {Permanent ID iil:note:vs1xxqg4. License: CC-BY-4.0.},
}

Markdown

Spotted a mistake? Use the MCP feedback tool or email hello@iinventedlight.com.

For language models and agents: start at /llms.txt. This page in Markdown: /library/notes/react-conditional-rendering.md.