ilonacodes
Patreon
Investor Profile
Contact

Financial tips and advice on investment for developers:
"Learn how to free extra monthly cash from your dev-salary for investment"

There are so many different ways to free money for investments without thinking of getting another job. Download my Top-15 cash-freeing tips cheat sheet.

Get my 15 Tips to Invest More Cash Monthly!
11
Oct
2018
#web
#react
#javascript
#props
#tech

How to Avoid Duplication of Common Wrapper Behavior in React Using Children Prop

11 Oct, 2018

source: bit.ly/2xzBpaF

When I was learning React there were a couple things that I couldn’t clearly understand and one of them was children prop. That is until I faced the problem similar to the following one.

While working on the “More Details” feature for a few components that differ only by the title. I decided to create the wrapper component <MoreDetails />. Because I have to manage the state of whether it is shown or not, it has to be a class component. So, that allows me to pass the specific title through the children prop and avoid the duplicated usage of wrapper. Below you will see the render method of the wrapper component:

// MoreDetails.js

...
render() {
        return (
            <div>
                <Accordion>
                    // in this place should be a title for each invoking the MoreDetails component
                    {this.props.children}
                    <button onClick={this.showContent}>
                        {this.state.showedContent ? 'Ausblenden' : 'Anzeigen'}
                    </button>
                </Accordion>
                <MoreDetailsComponent className={this.state.showedContent ? show : hide}/>
            </div>
        );
    }
}

To show the usage of children prop just use the full tag <MoreDetails>...</MoreDetails> and put the children between the opening and closing tags. For example:

// VideoDetails.js

...
return(
  <div>
      // all <p> DOM-element and all texts inside are {this.props.children} for <MoreDetails /> component
      <MoreDetails><p>Notizen</p></MoreDetails>
      <MoreDetails><p>Feedback an Dozenten</p></MoreDetails>
      <MoreDetails><p>Kommentare</p></MoreDetails>
  	...
  </div>                   

Since the goal of children prop for this task is just to render the content of the <p> element, so I can customize the title to whatever I need and keep reusing the <MoreDetails /> component.

You can read more about React.Children API and find more details here.

Thank you for reading!

I hope you find this post useful for applying props.children to your React project.


Cheers,

ilonacodes

Tags | #web #react #javascript #props #tech
Next: Simple Image Carousel with React

My name is Ilona, and I'm a software engineer, founder, and blogger who is (besides programming) also passionate about startups, finance and investment

"I like to work hard for things that are worth it."
The latest articles:
Numbrs Review - App For Personal Finances (Germany & UK only)
How Developers Can Get Symbols From Stock Indexes With Python
Bitcoin Profit Calculator For Developers

Imprint
Privacy Policy
© 2021 ilonacodes
© 2021 ilonacodes
Imprint
Privacy Policy