React Mastery / React Basics

Return value of a React Component

📌 What Does a React Component Return?

  • A React component must return a single root element.

  • This single element can contain multiple nested elements inside it.

  • If you return multiple sibling elements directly, React will throw an error.

❌ Invalid: Returning Multiple Elements

function App() {
  return (
    <h1>Hello</h1>
    <p>Welcome to React</p>
  );
}

🚨 Error:

JSX expressions must have one parent element

React doesn’t know how to render multiple top-level elements.

✅ Valid Syntax

Wrap Inside a Parent Element

function App() {
  return (
    <div>
      <h1>Hello</h1>
      <p>Welcome to React</p>
    </div>
  );
}

Using React Fragment

function App() {
  return (
    <React.Fragment>
      <h1>Hello</h1>
      <p>Welcome to React</p>
    </React.Fragment>
  );
}

Using Fragment Shorthand

function App() {
  return (
    <>
      <h1>Hello</h1>
      <p>Welcome to React</p>
    </>
  );
}

  • No extra DOM node

  • Clean JSX

  • Recommended in most cases

🧠 Why React Enforces This Rule?

  • JSX is converted to React.createElement()

  • Each component must return one element object

  • Multiple roots would create ambiguity in the virtual DOM tree

⚠️ Special Case: Returning null

function App() {
  return null;
}

  • Valid

  • Component renders nothing

  • Useful for conditional rendering

❌ Invalid: Returning Multiple Elements Conditionally

function App({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h1>Welcome</h1><p>User</p>; // ❌ error
  }
}

✅ Correct Conditional Return

function App({ isLoggedIn }) {
  if (isLoggedIn) {
    return (
      <>
        <h1>Welcome</h1>
        <p>User</p>
      </>
    );
  }
  return null;
}