Getting started with a functional React component is easy but when we are building reusable components we should keep somethings in mind.
To ensure that our React component can support all of them we should use the following code as boilerplate.
First we destructure all the props we need in our component and then collect all the remaining props in props variable.
Then we merge the className prop with our own component's classes.
At last, we assign the className and spread the other props and render children inside the div.
We can then use it like this
PRO TIP: in our component to avoid hardcoding the div element as wrapper, we can implement as prop in the component like this.
then it will be used like this