Cacher is the code snippet organizer for pro developers

<div id="root"></div>

interface ChildProps {
  childText: string
  someprop: string
}
class Child extends React.Component<ChildProps> {
  handleClick(): void {
    console.log('click start')
    console.log(this.props)
    console.log('click end')
  }
  render(): ReactNode {
    return <button onClick={this.handleClick.bind(this)}>Butt0on</button>
  }
}

interface MyBaseProps {
  hello?: string
  title: string
  render: (props: any) => ReactNode
}
const MyBase = (props: MyBaseProps) => {
  const toChild = {
    someprop: 'newSomeone',
    title: 'testString'
  }
  
  console.log('toChild' + JSON.stringify(toChild))
  return (<>
    <div>{props.title}</div>
    <div>{props.hello}</div>
    {props.render(toChild)}
  </>)
}

interface WrapperState {
  hello: string
  test: string
}
interface WrapperProps {
  render: (props: WrapperState) => ReactNode
}
class Wrapper extends React.Component<WrapperProps, WrapperState> {
  constructor(props: WrapperProps) {
    super(props)
    this.state = {
      hello: 'this is wrapper',
      test: 'next, test string'
    }
  }
  render(): ReactNode {
    return this.props.render(this.props)
  }
}

ReactDOM.render(
  <Wrapper 
    render={(data) => 
      <MyBase
        {...data} 
        title={'TITLE'}
        render={(props) => {
          return <Child 
            {...props}
            childText={'child text ...'}
          /> }
        }
      />
    }
  />,
  document.getElementById('root')
);

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>