freeCodeCamp/guide/english/react/render-props-component/index.md

title

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.

Other Resources

• React docs: Render props