Render Props

renderProps.jsx

// A component with render prop takes a function that returns React element and calls it instead of 
// implementing its own render

// render, props is a function 
// render prop is a funtion that takes in data, and return JSX element? 
<DataProvider render={data => (
   <h1>Hello {data.target} </h1>
)}/>

// instead rendering from SharedComponent, you render using props. 
// Reusable component i guess 
const SharedComponent extends React.Component { 
   render() {
      return(
         <div>
            {this.props.render()}
         </div>
      )
   }
}
// functional component
const SharedComponent = ({ render }) => {
   return(
      <div>
         {this.props.render()}
      </div>
   )
}  

const SayHello = () => (
   <SharedComponent render={() => (
      <span>hello!</span>
   )} />
)

// render Props in TS 
interface FormProps<T> {
   values: T;
   children: (values: T) => JSX.Element;
}