React Nested Components

React applications are rarely made from a single component. Instead, components are combined and organized into a hierarchy.

When one React component renders another component inside its JSX, the components form a nested component structure.

For example:

function App() {
  return (
    <main>
      <Header />
      <CoursePage />
      <Footer />
    </main>
  );
}

Here, App renders Header, CoursePage, and Footer.

We can think of App as the parent component and the other components as its children.

This creates a component hierarchy:

App
├── Header
├── CoursePage
└── Footer

Nested components are one of the fundamental ways React applications are organized.

What Are Nested Components?

A nested component is a component that is rendered inside another component.

For example:

function Profile() {
  return (
    <section>
      <ProfileHeader />
      <ProfileDetails />
    </section>
  );
}

ProfileHeader and ProfileDetails are nested inside Profile.

The structure is:

Profile
├── ProfileHeader
└── ProfileDetails

The word nested simply means that one component exists inside another component’s rendered structure.

A Simple Example

Consider a website header:

function Header() {
  return (
    <header>
      <Logo />
      <Navigation />
    </header>
  );
}

The component hierarchy becomes:

Header
├── Logo
└── Navigation

Header is responsible for the overall header structure.

Logo handles the logo.

Navigation handles the navigation links.

This is better than putting every part of the header into one large component.

Nested Components Create a Component Tree

When components are nested, React creates a hierarchy commonly called the component tree.

For example:

function App() {
  return (
    <>
      <Header />
      <Dashboard />
      <Footer />
    </>
  );
}

Then:

function Dashboard() {
  return (
    <main>
      <Sidebar />
      <Content />
    </main>
  );
}

And:

function Content() {
  return (
    <section>
      <CourseList />
      <ProgressCard />
    </section>
  );
}

The resulting structure looks like this:

App
├── Header
├── Dashboard
│   ├── Sidebar
│   └── Content
│       ├── CourseList
│       └── ProgressCard
└── Footer

Each level contains smaller parts of the interface.

This hierarchy helps you understand how the application is assembled.

Parent and Child Relationships

Nested components create parent-child relationships.

Consider:

function Dashboard() {
  return <CourseList />;
}

Here:

• Dashboard is the parent.
• CourseList is the child.

If CourseList renders another component:

function CourseList() {
  return <CourseCard />;
}

Then:

• Dashboard is the parent of CourseList.
• CourseList is the parent of CourseCard.
• CourseCard is a descendant of Dashboard.

The hierarchy is:

Dashboard
└── CourseList
    └── CourseCard

A component can therefore be a child in one relationship and a parent in another.

Nesting Components Multiple Levels Deep

Components can be nested several levels deep.

For example:

function App() {
  return <Dashboard />;
}

Then:

function Dashboard() {
  return <CourseSection />;
}

Then:

function CourseSection() {
  return <CourseList />;
}

Then:

function CourseList() {
  return <CourseCard />;
}

The structure becomes:

App
└── Dashboard
    └── CourseSection
        └── CourseList
            └── CourseCard

There is no special syntax required for this.

You simply render one component inside another.

Nested Components with JSX

Nesting works naturally because JSX allows components to be placed inside other JSX.

For example:

function Page() {
  return (
    <div>
      <Header />

      <main>
        <Sidebar />
        <Content />
      </main>

      <Footer />
    </div>
  );
}

This is similar to nesting HTML elements:

<div>
  <header></header>

  <main>
    <aside></aside>
    <section></section>
  </main>

  <footer></footer>
</div>

The difference is that React lets you use your own components as building blocks.

Nested Components and Props

Nested components commonly receive information from their parent through props.

For example:

function CoursePage() {
  return (
    <CourseHeader
      title="React Fundamentals"
      instructor="Alex"
    />
  );
}

The nested CourseHeader component receives those values:

function CourseHeader({ title, instructor }) {
  return (
    <header>
      <h1>{title}</h1>
      <p>Instructor: {instructor}</p>
    </header>
  );
}

The relationship is:

CoursePage
└── CourseHeader
      ↑
    props

The parent supplies the data, while the child displays it.

Passing Props Through Nested Components

Sometimes data needs to travel through multiple levels.

For example:

App
└── Dashboard
    └── CourseList
        └── CourseCard

Suppose App has course information:

function App() {
  const course = {
    title: "React Fundamentals",
    instructor: "Alex"
  };

  return <Dashboard course={course} />;
}

Dashboard can pass it to CourseList:

function Dashboard({ course }) {
  return <CourseList course={course} />;
}

Then CourseList passes it to CourseCard:

function CourseList({ course }) {
  return <CourseCard course={course} />;
}

Finally, CourseCard uses it:

function CourseCard({ course }) {
  return (
    <article>
      <h2>{course.title}</h2>
      <p>{course.instructor}</p>
    </article>
  );
}

The data travels down the component hierarchy:

App
 ↓
Dashboard
 ↓
CourseList
 ↓
CourseCard

This is called prop drilling when data is passed through components that don’t otherwise need that data just to reach a deeper component.

You will learn more appropriate solutions for complex cases later, including Context and state-management patterns.

Nested Components and children

Nested structures can also be created using the children prop.

Consider:

function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}

Now another component can be placed inside it:

function CoursePage() {
  return (
    <Card>
      <CourseDetails />
    </Card>
  );
}

The structure becomes:

CoursePage
└── Card
    └── CourseDetails

The Card doesn’t need to know what CourseDetails contains.

It simply renders its children.

This makes the component flexible and reusable.

Nested Components and Component Composition

Nested components are closely connected to component composition.

Composition means combining components to build larger interfaces.

Nesting describes the hierarchical structure created by that composition.

For example:

function Dashboard() {
  return (
    <DashboardLayout>
      <Sidebar />
      <CourseList />
    </DashboardLayout>
  );
}

You are composing several components.

At the same time, those components are nested within the dashboard structure.

A useful way to think about it is:

Composition = combining components

Nesting = how those components are arranged hierarchically

A Real-World Learning Platform Example

Imagine you’re building a learning platform.

A course dashboard could contain:

CourseDashboard
├── DashboardHeader
├── CourseOverview
│   ├── CourseThumbnail
│   ├── CourseTitle
│   └── CourseProgress
├── LessonSection
│   ├── LessonList
│   │   ├── LessonItem
│   │   ├── LessonItem
│   │   └── LessonItem
│   └── LessonActions
└── InstructorCard

The top-level component could be:

function CourseDashboard() {
  return (
    <main>
      <DashboardHeader />

      <CourseOverview />

      <LessonSection />

      <InstructorCard />
    </main>
  );
}

Then:

function CourseOverview() {
  return (
    <section>
      <CourseThumbnail />
      <CourseTitle />
      <CourseProgress />
    </section>
  );
}

And:

function LessonSection() {
  return (
    <section>
      <LessonList />
      <LessonActions />
    </section>
  );
}

This creates a clean hierarchy.

Nested Components vs HTML Nesting

HTML nesting looks like this:

<div>
  <section>
    <h2>React</h2>
  </section>
</div>

React component nesting looks like this:

<App>
  <CoursePage />
</App>

Both create hierarchical structures, but React components provide an additional layer of abstraction.

Instead of repeating the implementation of a complex section, you can represent it with a meaningful component.

For example:

<CourseCard />

can represent a complete card containing:

• Thumbnail
• Title
• Description
• Instructor
• Progress
• Button

The parent doesn’t need to know every implementation detail.

Keeping Nested Components Organized

A good component hierarchy should make the application easier to understand.

For example:

App
├── Header
├── MainContent
│   ├── Sidebar
│   └── CourseList
│       ├── CourseCard
│       └── CourseCard
└── Footer

This is easier to understand than an enormous component containing hundreds of unrelated JSX elements.

Each component has a meaningful responsibility.

Avoid Excessive Nesting

Nested components are useful, but excessive nesting can make an application unnecessarily complicated.

For example:

App
└── Page
    └── Section
        └── Container
            └── Wrapper
                └── Content
                    └── Box
                        └── Card

If these components don’t have meaningful responsibilities, the structure may be unnecessarily deep.

Instead, ask:

Does this component represent a useful part of the interface?

If the answer is no, you may not need another component.

Good component architecture is not about creating the deepest possible tree.

It is about creating a tree that clearly represents the application’s structure.

An Important Mistake: Defining Components Inside Components

There is an important distinction between rendering a component inside another component and defining a component function inside another component.

This is good:

function Dashboard() {
  return <CourseCard />;
}

function CourseCard() {
  return <article>React Course</article>;
}

CourseCard is defined at module scope and rendered by Dashboard.

Avoid unnecessarily doing this:

function Dashboard() {
  function CourseCard() {
    return <article>React Course</article>;
  }

  return <CourseCard />;
}

The component function is recreated whenever Dashboard renders.

This can also affect component identity and cause unnecessary remounting behavior.

For components that are meant to be components in your application’s structure, prefer defining them outside the parent component.

Nested Components and State

Nested components can have their own state.

For example:

import { useState } from "react";

function CourseCard() {
  const [liked, setLiked] = useState(false);

  return (
    <article>
      <h2>React Fundamentals</h2>

      <button onClick={() => setLiked(!liked)}>
        {liked ? "Liked" : "Like"}
      </button>
    </article>
  );
}

If CourseCard is nested inside CourseList, the card can manage its own state.

CourseList
├── CourseCard
├── CourseCard
└── CourseCard

Each rendered CourseCard can have its own state.

For example:

CourseCard A → liked = true
CourseCard B → liked = false
CourseCard C → liked = true

This is one reason breaking interfaces into meaningful components is useful.

Nested Components and Events

Events can also be handled inside nested components.

For example:

function CourseCard({ onSelect }) {
  return (
    <article>
      <h2>React Fundamentals</h2>

      <button onClick={onSelect}>
        View Course
      </button>
    </article>
  );
}

The parent can provide the event handler:

function CourseList() {
  function handleSelect() {
    console.log("Course selected");
  }

  return (
    <CourseCard onSelect={handleSelect} />
  );
}

The relationship becomes:

CourseList
   ↓
passes event handler
   ↓
CourseCard
   ↓
user clicks button
   ↓
handleSelect()

This pattern becomes extremely important as you build interactive applications.

Nested Components and Data Flow

React generally follows a predictable data-flow model.

Data commonly flows from parent components down to child components through props.

For example:

Parent
  ↓
props
  ↓
Child

With deeper nesting:

Parent
  ↓
Child
  ↓
Grandchild

This predictable direction makes applications easier to reason about.

However, it is important to remember that nested components do not automatically share state simply because one is inside another.

If two components need to share information, you may need to move the state to a common parent or use another appropriate React pattern.

Component Nesting Does Not Mean DOM Nesting

A React component can render different DOM structures internally.

For example:

function CourseCard() {
  return (
    <article>
      <h2>React</h2>
      <p>Learn React.</p>
    </article>
  );
}

The parent only sees:

<CourseCard />

Internally, however, CourseCard produces:

<article>
  <h2>React</h2>
  <p>Learn React.</p>
</article>

The component hierarchy and DOM hierarchy are related, but they are not exactly the same concept.

React components provide a logical structure for your application, while the browser ultimately receives HTML elements.

Fragments in Nested Components

Sometimes a component needs to return multiple elements without adding an unnecessary wrapper element.

React Fragments are useful here.

function CourseInfo() {
  return (
    <>
      <h2>React Fundamentals</h2>
      <p>Learn the fundamentals of React.</p>
    </>
  );
}

You can then nest the component inside another component:

function CourseCard() {
  return (
    <article>
      <CourseInfo />
    </article>
  );
}

The Fragment doesn’t create an additional DOM element.

How to Decide Where to Nest a Component

When designing a component hierarchy, ask:

Does the component belong logically inside the parent?

For example:

CourseList
└── CourseCard

makes sense because course cards belong to a course list.

Does the child need information from the parent?

If yes, props may be appropriate.

Does the child have its own responsibility?

If yes, making it a separate component can improve organization.

Is the component reusable?

If the same UI appears in multiple places, a reusable component may be appropriate.

Is the hierarchy becoming unnecessarily deep?

If yes, consider simplifying the structure.

Common Mistakes with Nested Components

Confusing Nesting with Defining Components

Rendering:

<Profile />

inside another component is normal.

Defining:

function Profile() {}

inside another component is generally something to avoid unless there is a specific reason.

Creating Unnecessary Wrapper Components

Don’t create components simply to add another level to the tree.

Passing Too Many Props Through Every Level

If data needs to pass through many components that don’t use it, you may eventually need a different state-sharing approach.

Creating Extremely Deep Trees

A deeply nested tree isn’t automatically better architecture.

Use meaningful boundaries.

Forgetting Component Responsibilities

A nested child should have a clear purpose.

Avoid turning a child component into another giant component containing unrelated responsibilities.

Best Practices for Nested Components

Keep the Hierarchy Meaningful

A component tree should describe the application’s structure naturally.

Dashboard
├── Sidebar
├── CourseList
└── ProgressSummary

is easier to understand than arbitrary nesting.

Keep Components Focused

Each component should handle a meaningful piece of UI or behavior.

Pass Data Through Props

When a child needs information from its parent, props are usually the starting point.

Use children for Flexible Layouts

Components such as cards, modals, layouts, and containers can often benefit from children.

Avoid Unnecessary Component Definitions Inside Components

Keep reusable component definitions at module scope.

Don’t Over-Componentize

Create components when they improve clarity, reuse, or maintainability.

Visualizing Nested Components

A useful way to understand nested components is to imagine your interface as a tree.

For example:

Application
│
├── Header
│   ├── Logo
│   └── Navigation
│
├── Dashboard
│   ├── Sidebar
│   └── MainContent
│       ├── CourseList
│       │   ├── CourseCard
│       │   ├── CourseCard
│       │   └── CourseCard
│       │
│       └── ProgressCard
│
└── Footer

Each indentation level represents another level in the component hierarchy.

When you understand this tree, you can more easily understand:

• Where UI is rendered.
• Where props are passed.
• Where state lives.
• Where events are handled.
• Which components depend on others.
• Where a reusable component might be extracted.

Practice Exercise

Build a small learning dashboard using nested components.

Create this structure:

App
├── Header
├── Dashboard
│   ├── WelcomeMessage
│   ├── CourseSection
│   │   ├── CourseList
│   │   │   ├── CourseCard
│   │   │   ├── CourseCard
│   │   │   └── CourseCard
│   │   └── ViewAllButton
│   └── ProgressCard
└── Footer

Start with App:

function App() {
  return (
    <>
      <Header />
      <Dashboard />
      <Footer />
    </>
  );
}

Then nest the next level:

function Dashboard() {
  return (
    <main>
      <WelcomeMessage />
      <CourseSection />
      <ProgressCard />
    </main>
  );
}

Continue building the hierarchy until you reach CourseCard.

Then pass course information through props:

<CourseCard
  title="React Fundamentals"
  progress={65}
/>

Create at least three cards and give each one different information.

Finally, draw your component tree on paper or in a diagram.

Image Placement

Place an image immediately after the section “A Simple Example.”

Create a modern 16:9 educational infographic showing how nested React components form a component tree.

The visual should show:

             App
          /   |   \
      Header Dashboard Footer
                /    \
           Sidebar   Content
                       |
                   CourseList
                    /  |  \
                 Card Card Card

Use a modern developer-focused visual style with polished cards, subtle connecting lines, React-inspired details, clean typography, and a contemporary interface. Keep the text minimal and make the hierarchy visually obvious.

Caption: Nested React components create a hierarchical component tree.

Alt text: React nested components arranged as a component tree with parent and child relationships.

Nested Components Cheat Sheet

Concept	Meaning
Nested component	A component rendered inside another component
Parent component	Component that renders another component
Child component	Component rendered by a parent
Descendant	A component located deeper in the component tree
Component tree	Hierarchical structure of React components
Props	Data passed from parent to child
children	Content placed inside a component
Prop drilling	Passing data through components to reach a deeper child
Composition	Combining components to create larger UI

A simple mental model is:

Parent
  ↓
Child
  ↓
Grandchild
  ↓
More components

The important point is that nested components form a hierarchy, but each component can still have its own responsibility, props, state, and behavior.

Key Takeaways

• Nested components are components rendered inside other components.
• Nesting creates parent-child relationships.
• Multiple levels of nesting create a component tree.
• Components can receive data from parents through props.
• The children prop is useful for flexible nested content.
• Nested components can have their own state and event handlers.
• Data normally flows from parent to child through props.
• Deep prop passing can lead to prop drilling.
• Component nesting should represent meaningful relationships.
• Avoid unnecessary wrapper components and excessive nesting.
• Avoid defining reusable components inside another component.
• Component trees make complex React applications easier to understand.

The key idea is simple:

A React interface can be built as a tree of components, where each component handles a meaningful part of the UI.