Using the 'children' Prop as a Function: A New Way to Parse Extra Features in React

#react #webdev #javascript #beginners

Hello fellow developers 👋, in this blog I am going to discuss this new feature that I found out about this week. While working on one of my projects, I had the challenge to create a global component and parse children as props to these components. On the surface level, it sounds like a piece of cake 🎂 but the challenge I faced was very different from what developers normally encounter.

Problem.

Generally, You will get into a problem where you have a parent component and a child component and you have to wrap the ParentComponent around the content in the child component which will be replaced with children in the parent component.

Here is the general case that developers saw and implemented in their code:

// parent component
const ParentComponent = ({ children }) => {
    return (
        <div>
            <h1>Heading</h1>
            {children}
        </div>
    );
}

// child component
const ChildComponent = () => {
    return (
        <ParentComponent>
            <p>some paragraph...</p>
        </ParentComponent>
    );
}

But what if I have some states in the ParentComponent and I have to pass these as props to ChildComponent like some boolean state, global styles and ID variables?

For example, on a button click I want the hidden text will be appeared on the screen and on clicking again, it will hide. Now how can I access the open state in the child component:

// parent component
const ParentComponent = ({ children }) => {
    const [open, setOpen] = useState<boolean>(false);
    return (
        <div>
            <h1>Heading</h1>
            <button onClick={() => setOpen(prev => !prev)}>
                {children}
            </button>
        </div>
    );
}

// child component
const ChildComponent = () => {
    return (
        <ParentComponent>
            <p>some paragraph...</p>
            {/*not possible*/}
            {open ? 
                (<p>hidden text that will only be appear if the component is clicked</p>) : null}
        </ParentComponent>
    );
}

Solution.

The solution I come up with is to figure out a way to pass props in children props. Developers can use the 'children' prop as a function, providing a new way to parse extra features.

By doing this, developers can pass additional parameters and customize the behaviour of child components in more flexible and dynamic ways. To do that, treat the children prop as a function and parse the variables as an argument of a function.

// parent component
const ParentComponent = ({ children }) => {
    const [open, setOpen] = useState<boolean>(false);
    return (
        <div>
            <h1>Heading</h1>
            <button onClick={() => setOpen(prev => !prev)}>
                {children(open)}
            </button>
        </div>
    );
}

// child component
const ChildComponent = () => {
    return (
        <ParentComponent>
            {(open) => {
                return (
                    <p>some paragraph...</p>
                        {open ? 
                            (<p>hidden text that will only be appear if the component is clicked</p>) : null}
                );
            }}
        </ParentComponent>
    );
}