DEV Community

Cover image for Using the 'children' Prop as a Function: A New Way to Parse Extra Features in React
Sanchit Bajaj
Sanchit Bajaj

Posted on

3 1 1 1 1

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

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>
    );
}
Enter fullscreen mode Exit fullscreen mode

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>
    );
}
Enter fullscreen mode Exit fullscreen mode

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>
    );
}
Enter fullscreen mode Exit fullscreen mode

Now with this, you can parse as many props from the parent component to the child component as a function of the children prop.

Thank you! for reading, please leave your comments if any ✌️

Don't forget to bookmark this blog for the future πŸ“Œ

Connect with the author:

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (2)

Collapse
 
ahmed_aarafa profile image
Ahmed Arafa β€’

GREAT tip

Collapse
 
solitrix02 profile image
Sanchit Bajaj β€’

Thanks a lot πŸ€—

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more