Render props in ReactJS

What is render props?

Render prop is used to share code between React components using a prop whose value is a function.

A component with a render prop takes a function that returns a React element.

Example of render props using functional component

import React from 'react';

function Renderer(props) {
    console.log(props);
    return (
        props.children()
    );
}

const RenderProps = () =>{
    return (
        <div className="App">
            <Renderer>
                {() => {
                    return (
                        <h1>I am rendered using render props</h1>
                    );
                }}
            </Renderer>
        </div>
    );
};
export default RenderProps;