1.2 KiB
1.2 KiB
title |
---|
Render Props Component |
Render Props Component
Render props is an advanced React pattern, yet so simple!
Example
This is an example on how you can use render prop for a toggle functionality.
import React, { PureComponent } from "react";
class Toggle extends PureComponent {
state = {
on: false
};
toggle = () => {
this.setState({
on: !this.state.on
});
};
render() {
const { children } = this.props;
return children({
on: this.state.on,
toggle: this.toggle
});
}
}
export default Toggle;
This Toggle component will return it's children state.on
and the function toggle. Which can be used in it's child components.
This Toggle can be used as follows:
<Toggle>
{({ on, toggle }) => (
<Fragment>
<button onClick={toggle}>Show / Hide</button>
{on && <h1>I can be toggled on or off!</h1>}
</Fragment>
)}
</Toggle>
As you can see, the toggle functionality can be used by it's child Button to toggle some content. if on is true the h1-tag will get rendered otherwise not.