Question

What is a wrapper component in reactJs?

Answer 1

A wrapper in React is a component that wraps or surrounds another component or group of components. It can be used for a variety of purposes such as adding additional functionality, styling, or layout to the wrapped components.

For example, consider a simple component that displays a message:

const Message = ({ text }) => {
  return <p>{text}</p>;
};

We can create a wrapper component that will add a border to the message component:

const MessageWrapper = (props) => {
  return (
    <div style={{ border: "1px solid black" }}>
      <Message {...props} />
    </div>
  );
};

Now we can use the MessageWrapper component instead of the Message component and the message will be displayed with a border:

<MessageWrapper text="Hello World" />

Wrapper component can also accept its own props and pass them down to the wrapped component, for example, we can create a wrapper component that will add a title to the message component:

const MessageWrapperWithTitle = ({title, ...props}) => {
  return (
    <div>
      <h3>{title}</h3>
      <Message {...props} />
    </div>
  );
};

Now we can use the MessageWrapperWithTitle component and pass title props:

<MessageWrapperWithTitle title="My Message" text="Hello World" />

This way, the wrapper component can add additional functionality, styling, or layout to the wrapped component while keeping the wrapped component simple and reusable.