React.js: Wrapping one component into another

React.js is a powerful JavaScript library that allows developers to build reusable UI components. One common task in React.js is wrapping one component into another. This can be useful when you want to add additional functionality or styling to an existing component without modifying its original code. In this blog post, we will explore two different approaches to achieve this.

Approach 1: Higher-Order Components (HOC)

Higher-Order Components (HOC) is a design pattern in React.js that enables component composition. It allows you to wrap one component with another to enhance its functionality. Here’s an example:

import React from 'react';

const withWrapper = (WrappedComponent) => {
  return class extends React.Component {
    render() {
      return (
        

          
        
      );
    }
  };
};

const MyComponent = () => {
  return (
    

      
Hello, World!
    
  );
};

const WrappedComponent = withWrapper(MyComponent);

export default WrappedComponent;

In this example, we define a higher-order component called withWrapper that takes a component as an argument and returns a new component that wraps the original component inside a

import React from 'react';

const Wrapper = ({ render }) => {
  return (
    

      {render()}
    
  );
};

const MyComponent = () => {
  return (
    

      
Hello, World!
    
  );
};

const App = () => {
  return (
     (
        
      )}
    />
  );
};

export default App;