Wrapping elements in React Js

Wrapping elements in React Js

We Have 3 methods To wrap the elements.

1- wrapping it inside an HTML element like div, section ......

Example:

import React from "react";
const App =()=> {
  return (
    <div> 
      <h1></h1>
       <p></p>
    </div>
  );
}

export default App;

2-wrapping it inside Fragments : <> </>

Example:

import React from "react";

const App =()=> {
  return (
    <>
      <h1></h1>
      <p></p>
    </>
  );
}

export default App;

3-wrapping it inside a wrapper component

//Wrapper Component
import React from "react";

const Wrapper = props=> {
   return props.children;
};
export default Wrapper;
//App Component
import React from "react";
import Wrapper from "./Wrapper.js";

const App = props=> {
  return (
    < Wrapper>
      <h1></h1>
      <p></p>
    < Wrapper/>
  );
}

export default App;