Render Props

Visual Example

[!NOTE] What's happening??

• SomeComponent passes a function as a prop called doSomething.
• Within the component definition doSomething is given a state value
• Because the value is unknown at the top level, the component passes a value upwards in the hierarchy

In the below example, the App level component is in charge of determining the jsx that gets rendered. Internally, the Decision component has a boolean state value that flips back and forth on an onClick event.

When clicked the variable is passed to the render prop, which is passing a function. The function accepts a boolean and then renders conditional logic based on the true/false value. When clicked the page displays a different message.

import React from "react"
import Decision from "./Decision"

function App() {
    return (
        <div>
            <Decision render={(goingOut) => {
                return (
                    <h1>
                        Am I going out tonight?? {goingOut ? 
                        "Yes!" : "Nope..."}
                    </h1>
                )
            }} />
        </div>
    )
}

export default App

import React from "react"

export default function Decision({ render }) {
    const [goingOut, setGoingOut] = React.useState(false)

    function toggleGoingOut() {
        setGoingOut(prev => !prev)
    }

    return (
        <div>
            <button onClick={toggleGoingOut}>Change mind</button>
            {render(goingOut)}
        </div>
    )
}

The rendered page: