Yogesh Chauhan's Blog

What does Containment mean in React?

in React on May 27, 2021

In all major programming languages there are few really great concepts like inheritance, abstraction, polymorphism, etc.

React has another concept called “composition”.

Now, the basic meaning of composition is nothing but a mixture of few ingredients which is actually works great since in React, the whole app is divided into small components and when they come all together, they make the app complete. But that’s just a basic understanding.

React has actually a powerful composition model. React recommends using composition rather than inheritance to reuse the code between different components.

So, what is Containment?

Some generic “boxes” components like Sidebar or a Dialog box in React are not aware of their children ahead of time. In those cases, React recommends that those components use their special children props to pass the children elements into their output.

Just like this:


function QuoteContainer(props) {
  return (
    <div className={'Quote Quote-' + props.color}>
      {props.children}
    </div>
  );
}


So that the other components can nest the JSX by passing the arbitrary children.

Just like this:


function Quote() {
  return (
    <QuoteContainer color="red">
      <h1>
        Some Quote
      </h1>
      <p>
        -by Yogesh Chauhan
      </p>
    </QuoteContainer>
  );
}


Here’s the working demo:

Pay attention to the QuoteContainer inside the Quote() component. Whatever you add inside QuoteContainer, it will be passed to the Quote(). The Quote() receives the props and renders them inside a div with classes that are defined in the stylesheet. At the end, the whole picture comes together and makes the final output.

Specialization in React

We want to use specialization in cases where we want to make some components act “specially”.

That’s where the composition comes into play.

Composition in React happens when a special component renders a generic component and then configures it with the passed props.

Let’s change the example above to understand this.

Specialization Demo


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
Add animation to your skills bar using CSSCSSHow to switch dark and light themes using pure CSS?CSSThe fundamental difference between HAVING and WHERE clauses in PostgresPostgresHow to convert a function component into a class in React?ReactHow to create a placeholder loader (throbber) using CSS?CSSSimple Page Hit Counter in PHPPHP