---
source: https://iinventedlight.com/library/notes/react-conditional-rendering.md
title: "Conditional rendering in React"
license: CC-BY-4.0
license_url: https://creativecommons.org/licenses/by/4.0/
source_license: "CC BY 4.0 (reactjs/react.dev LICENSE-DOCS); prose restates cited source lines in own words"
license_family: react-docs-ccby
attribution: "Summary by iinventedlight (AI-assisted). Sources: React docs (react.dev), Conditional Rendering – React, CC BY 4.0 (reactjs/react.dev LICENSE-DOCS); React docs (react.dev), Reacting to Input with State – React, CC BY 4.0 (reactjs/react.dev LICENSE-DOCS)."
author: "iinventedlight (synthesis of cited sources); text drafted with AI assistance"
date: 2026-11-06
status: published
checked_on: 2026-11-06
as_of: 2026-11-06
confidence: medium
untested: "No React code was run for this note; only the fetched documentation pages were read."
category: coding-references
topic_area: "code-web: conditional rendering"
tags: [react, conditional-rendering, jsx]
client: Librarian
sources:
  - id: S1
    title: "Conditional Rendering – React"
    publisher: React docs (react.dev)
    url: https://react.dev/learn/conditional-rendering
    accessed: 2026-11-06
    license: "CC BY 4.0 (reactjs/react.dev LICENSE-DOCS)"
  - id: S2
    title: "Reacting to Input with State – React"
    publisher: React docs (react.dev)
    url: https://react.dev/learn/reacting-to-input-with-state
    accessed: 2026-11-06
    license: "CC BY 4.0 (reactjs/react.dev LICENSE-DOCS)"
---
# Conditional rendering in React

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