Nested components in React JS

In React, components are used in hierarchy. One component is nested inside another and there is parent child relationship between them. Still, we have two types of components in React:

1. Independent components and 
2. Dependent components 

The difference lies in how they are defined and not how they are consumed. Because when a component is used then they have hierarchical relationship except for the top level container element which is usually DIV or a React fragment. This top level element is not React component.

In this post, you will see

1. first, how one component can be defined independent from any other component.
2. second, how one component can be used inside another component.
3. third, how one component can be defined inside another component. 

Let's look at examples to see how components are defined:

IndependentOne Component:

import React from 'react'

function IndependentOne() {
  return (
    <div>
      <h3>IndependentOne</h3>
    </div>
  )
}

export default IndependentOne

IndependentTwo Component:

import React from 'react'

function IndependentTwo() {
  return (
    <div>
      <h3>IndependentTwo</h3>
    </div>
  )
}

export default IndependentTwo

Now we use IndependentOne component inside IndependentTwo component. Note that both components are independent; any of them can be used into another one.

import React from 'react'
import IndependentOne from './IndependentOne'

function IndependentTwo() {
  return (
    <div>
      <h3>IndependentTwo</h3>
      <IndependentOne/>
    </div>
  )
}

export default IndependentTwo

This demonstrates how you can compose UI components by using one component inside another in React. It's a powerful feature that allows you to create complex UIs by combining simpler, reusable components.

Next question is, can we define one component inside another component?

The answer is yes. You can define a one component inside the another component. This is often referred to as a "nested" component. Here's an example:

import React from "react";

// Parent functional component
const ParentComponent = () => {
  // Child functional component defined inside the parent component
  const ChildComponent = () => {
    return <p>This is the child component</p>;
  };

  return (
    <div>
      <h1>This is the parent component</h1>
      {/* Using the ChildComponent inside the ParentComponent */}
      <ChildComponent />
    </div>
  );
};

export default ParentComponent;

In this example:

• We define a 'ParentComponent' functional component.
• Inside the 'ParentComponent', we define a 'ChildComponent' functional component.
• We then render the 'ChildComponent' directly inside the 'ParentComponent''s JSX markup.
• When the 'ParentComponent' is rendered, it will also render the 'ChildComponent' within it.

Important:

Defining a child component inside the parent component can be useful for encapsulating functionality or UI elements that are closely related to the parent component and don't need to be reused elsewhere. However, keep in mind that the child component will only be available within the scope of the parent component and cannot be accessed or used outside of it.

Another Example

Component1: A simple, independent component that renders a div with an <h3> tag.

import React from 'react'

const Component1 = () => {
  return (
    <div>
      <h3>Component1</h3>
    </div>
  )
}

export default Component1

Component2: Another independent component that renders a div with an <h3> tag.

import React from 'react'

const Component2 = () => {
  return (
    <div>
      <h3>Component2</h3>
    </div>
  )
}

export default Component2

Component3: This component renders its own content (an <h3> tag) and uses Component1 inside its JSX.

function Component3() {

  return (

    <div>

      <h3>Component3</h3>

      <Component1 /> {/* Nested Component */}

    </div>

  );

}

Component3 is an example of a Nested Component. Why?

In React, nesting occurs when one component renders another component within its JSX. Here, Component1 is nested within Component3 because it is rendered as part of Component3's output.

1. Parent Component: Component3 is the parent component because it renders Component1.
2. Child (Nested) Component: Component1 is the child (or nested) component because it is consumed/rendered within Component3.
3. Component2 is not nested within Component3 because it is defined separately and not used or rendered inside Component3. It is just another standalone component.
4. Component3 is an example of a nested component because it renders another component (Component1) within its JSX.

If you use Component3 somewhere else (e.g., in App), rendering Component3 will automatically include its child, Component1.