Day 03: Render props

#100DaysOfCode

Day 03: Render props

Learned about React render props, which is a technique to share code or data between components. Render props allows the parent component to have more control over the rendering of the child component.

Instead of passing child components as components pass them as functions using render props. Also, you can name the prop whatever you want instead of calling it “render”.

By implementing this pattern, the render prop component (parent component) can use the children prop in it. And the children prop becomes children as a function. So we can pass arguments to the children prop now. And that's the crucial part of the render prop pattern.

If we don’t want to lift the state up, then we can use the render prop in the parent component to render other components as child components in addition to using the state of the parent component. So we don’t have to lift the state up. Confusing, isn’t it? >_<

See the gist for more clarification:

https://gist.github.com/moazamdev/5cdde81880c7bbac13c1baaee6e4353c

Articles

https://www.robinwieruch.de/react-render-props/

#reactjs #frontenddev #webdev #javascript #learnreact