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.

Both render props and HOC can absolutely apply to functional components.

Example of render props using functional component

import React from 'react';

function Renderer(props) {
    return (

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