MENU


With Hooks

Sometimes you want to create some reusable functionality, without any UI. There is no direct way to do this in React, because normally the components render something. So how do we create a component which renders nothing but still gives you some functionality? Here is an example of very simple render props:

We just created a counter functionality. We don't care how users draw this, but we will give them the functionality to read a counter value and increase it. That's why we use the children property to delegate the drawing to the users.
RESETRUNFULL
let Increment = props => {
   let [counter, setCounter] = React.useState(0);
   let increment = () => {
      setCounter(ps => ps + 1);
   };
   return <div>{props.children(counter, increment)}</div>;};

export default function App() {
   return (<Increment>
                 {(counter, increment) =>
                     (<div onClick={increment}>
                       {counter}
                     </div>)}
         </Increment>);}

ReactDOM.render(<App/>,document.querySelector("div"));

It is up to the user to decide how they will draw a counter. The Increment component just gives them the functionality.