import React from 'react'; import { Button } from './components/button'; export const withLoggingOnClickWithParams = ( Component: any, // adding some params as a second argument to the function params: any, ) => { return (props: any) => { const onClick = () => { console.info('Log on click something for: ', params.text); // don't forget to call onClick that is coming from props! // we're overriding it below props.onClick(); }; // return original component with all the props // and overriding onClick with our own callback return ; }; }; export const ButtonWithLoggingOnClick = withLoggingOnClickWithParams(Button, { text: 'button component' }); export const withLoggingOnClickWithProps = (Component: any) => { return ({ logText, ...props }: any) => { const onClick = () => { console.info('Log on click something for: ', logText); // don't forget to call onClick that is coming from props! // we're overriding it below props.onClick(); }; // return original component with all the props // and overriding onClick with our own callback return ; }; }; export const ButtonWithLoggingOnClickWithProps = withLoggingOnClickWithProps(Button); export default function App() { return ( <>

Button with logging on click

Logging is injected via HOC, but we still can use onClick prop

{ console.info('Click in prop'); }} > Click me

Pass prop that will be logged

{ console.info('Click in prop'); }} > Click me ); }

Chapter 7. Example 3