React is all about components and props for configuring these components for passing data into them. Any elements inside an opening and closing tag can be counted as children. And the elements inside of that opening and closing tag can be passed to another component as children props. Children props is a very efficient way to reduce code in a project without changing the output.

What is Composition?

React Composition is a pattern that helps to break complex components into smaller ones and use those across other components. It increases the reusability of the code and reduces code overwritting.

// src/App.js



import Home from "./components/Home";

function App() {
  const divStyle = {
    height: "200px",
    paddingTop: "100px",
    paddingLeft: "40%",
    backgroundColor: "gray",
    color: "white"
  }
  return (
    <div>
     
      {/* Custom Home component */}
      <Home className="grid-style">
        <div style={divStyle}>This is Div 1</div>
        <div style={divStyle}>This is div 2</div>
        <div style={divStyle}>This is div 3</div>
      </Home>
     
    </div>
  );
}

export default App;

In the above code snippet instead of <div>, a custom component has been used with elements in it (<Home>...</Home>). The elements inside of this component are its children that can be accessible in the Home.js component. And it has a className, named “grid-style“.

// src/components/Home.js

import React from 'react';
import './Home.css'
const Home = (props) => {
    // recieving className form props
    const classes = props.className;
    console.log(classes)
    return (
        <div className={classes}>
            {props.children}
        </div>
    );
};

export default Home;

In the above code snippet, it is inside Home.js. Here, props have been passed as an argument of it and it receives the data inside of it through props.children.

And it also receives the className through props (check the code before this one).

const classes = props.className;
// output: grid-style

After passing the classes constant variable as a className attribute in the <div> tag, the below CSS styles will be effective for the full component layout.

/* src/components/Home.css */

.grid-style {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

And the beauty of React composition is, that this Home.js component can be used anywhere with a className of ‘”grid-style”. Thus it reduces the lines of codes if we wanted to use the same style across many other components.

<Wrapper> {any elements or JSX code here is children props} </Wrapper>

How to use Composition or “children props” in ReactJS

There are a few steps to use elements as children props and manage them.

• Create a component inside src/components folder.

// src/components/CourseList.js

import React from 'react';

const CourseList = () => {

    return (
        <div>
            
        </div>
    );
};

export default CourseList;

// src/components/CourseList.js

import React from 'react';

const CourseList = () => {
    const startingDate = new Date(2022, 6, 12).toLocaleDateString();

    return (
        <div>
            <div>
                <h2>JavaScript</h2>
                <h4>Start from: {startingDate}</h4>
                <h5>Source: <a href="https://codedec.com">Codebun</a></h5>
            </div>

            <div>
                <h2>ReactJS</h2>
                <h4>Start from: {startingDate}</h4>
                <h5>Source: <a href="https://codedec.com">Codebun</a></h5>
            </div>

            <div>
                <h2>ExpressJS</h2>
                <h4>Start from: {startingDate}</h4>
                <h5>Source: <a href="https://codedec.com">Codebun</a></h5>
            </div>

        </div>
    );
};

export default CourseList;

//src/App.js

import './App.css';

// import CourseList.js from components folder
import CourseList from './components/CourseList';


function App() {

  return (
    <div className="App">
      <CourseList />
    </div>
  );
}

export default App;

import React from 'react';

const Wrapper = (props) => {
    
    return (
        <div>
            
        </div>
    );
};

export default Wrapper;

import Wrapper from './Wrapper'

return (
// replace the div tag with custom component Wrapper
        <div>
...
        </div>
    );

return (
        <Wrapper>
...
        </Wrapper>
    );

// src/components/CourseList.js

import React from 'react';

// import wrapper from wrapper component
import Wrapper from './Wrapper';

const CourseList = () => {
    const startingDate = new Date(2022, 6, 12).toLocaleDateString();

    return (
        <Wrapper>
            <div>
                <h2>JavaScript</h2>
                <h4>Start from: {startingDate}</h4>
                <h5>Source: <a href="https://codedec.com">Codebun</a></h5>
            </div>

            <div>
                <h2>ReactJS</h2>
                <h4>Start from: {startingDate}</h4>
                <h5>Source: <a href="https://codedec.com">Codebun</a></h5>
            </div>

            <div>
                <h2>ExpressJS</h2>
                <h4>Start from: {startingDate}</h4>
                <h5>Source: <a href="https://codedec.com">Codebun</a></h5>
            </div>

        </Wrapper>
    );
};

export default CourseList;

// src/components/Wrapper.js

import React from 'react';
// pass props as an argument
const Wrapper = (props) => {

    return (
        <div>

        </div>
    );
};

export default Wrapper;

// src/components/Wrapper.js

import React from 'react';
// pass props as an argument
const Wrapper = (props) => {

    return (
        <div>
            {props.children}
        </div>
    );
};

export default Wrapper;