render props example

App.js

import React, { Component } from "react";
import Counter from "./Counter";
import ClickCounter from "./ClickCounter";
import HoverCounter from "./HoverCounter";

class App extends Component {
  render() {
    return (
      <div>
        <Counter
          render={(count, incrementCount) => (
            <ClickCounter count={count} incrementCount={incrementCount} />
          )}
        />
        <Counter
          render={(count, incrementCount) => (
            <HoverCounter count={count} incrementCount={incrementCount} />
          )}
        />
      </div>
    );
  }
}

export default App;

ClickCounter.js

import React, { Component } from "react";

class ClickCounter extends Component {
  render() {
    const { count, incrementCount } = this.props;

    return (
      <div>
        <button onClick={incrementCount}>clicked {count} times</button>
      </div>
    );
  }
}

export default ClickCounter;

Counter.js

import React, { Component } from "react";

class Counter extends Component {
  constructor(props) {
    super(props);

    this.state = {
      count: 0
    };
  }

  incrementCount = () => {
    this.setState(prevState => ({ count: prevState.count + 1 }));
  };

  render() {
    return (
      <div>{this.props.render(this.state.count, this.incrementCount)}</div>
    );
  }
}

export default Counter;

HoverCounter.js

import React, { Component } from "react";

class HoverCounter extends Component {
  render() {
    const { count, incrementCount } = this.props;
    return (
      <div>
        <h2 onMouseOver={incrementCount}>hovered {count} times</h2>
      </div>
    );
  }
}

export default HoverCounter;

The term “render prop” refers to a technique for sharing code between React components using a prop whose value is a function.A component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic.