Another HOC and Render Callback Example

1. HOC

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const makeToggleable = ComposedComponent => {
  return class extends React.Component {
    state = {
      show: false
    };

    toggle = () => {
      this.setState(prevState => ({ show: !prevState.show }));
    };

    render() {
      return (
        <div>
          <ComposedComponent {...this.props} onClick={this.toggle}/>
             <h1> {this.props.title}</h1>
          {this.state.show && this.props.children}
        </div>
      );
    }
  };
};

class MyButton extends React.Component {
  render() {
    return <button onClick={this.props.onClick}>
               {this.props.title || 'button'}
        </button>;
  }
}

const EnhancedMyButtonDiv = makeToggleable(MyButton); //another component..

const App = () => {
  //finall component...
  return (
    <EnhancedMyButtonDiv title="enhancedbutton">
      <h1>xxxxx</h1> 
    </EnhancedMyButtonDiv>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

LINK====> codesandbox.io/embed/oqr3k…

2. Render Callback

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class Toggle extends React.Component {
  state = {
    show: false
  };

  toggle = () => {
    this.setState(prevState => ({ show: !prevState.show }));
  };

  render() {
    return this.props.children(this.state, this.toggle);
  }
}

let App = () => {
  //finall component...
  return (
    <Toggle>
      {(state, toggle) => (
        <div> 
          <button onClick={toggle}>
            enhanced button
          </button>
          {state.show ?
            <h1>Some content</h1>
            : null
          }
        </div>
      )}
    </Toggle>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

codesandbox.io/embed/93rnw…

()=>() and ()=>{return ()};

<Toggle>
      {(state, toggle) =>{
      return  <div>
          <button onClick={toggle}>enhanced button</button>
          {state.show ? <h1>Some content</h1> : null}
        </div>
      }}
    </Toggle>