Wrapper Component in React

Hi, I would like to introduce wrapper.

What is a wrapper?

Wrapper is a react concept, it is like a fragment <></> that covers any component or jsx as a blanket.

If you will use material ui component or Ant design, most probably you will encounter wrappers.

you can also make your own, let's have a look.

Wrapper.js

import React from "react";

export default function Wrapper(props) {
  return props.children;
}

This simple wrapper component will return everything it covers, it will not add anything on it's your own.

Now when you have build your own, you can use it anywhere in the project.

Home.js

import Wrapper from "../wrapper/Wrapper";
export function Home() {
  let navigate = useNavigate();
  return (

      <Wrapper>
        I am home component...
       <button onClick={() => navigate(`/Login`)}>go to login</button> 
      </Wrapper>

  );
}

This is my first article, As shortest as possible, if I have done any mistake, you are welcome to give me feedback, I will improve.

Comments

[Diego Souza]

Why you used a Wrapper component (nice idea) inside a Fragment?

This Wrapper it's like a Fragment, right?

[govindbisen]

yes, there is no need to use fragment. I forgot to remove it.