render-props.js

const WithColor = ({ children }) => {
  const color = /* advanced compuation as fuck */
  return children(color);
}

// nasz Component ktory korzysta z render propsow
const Component = () => {
  render (
    <WithColor>
     // jesli cokolwiek co jest miedzy tagiem jest przekazywane jaki children to mozna zrobic z tym cokolwiek
     // wiec mozna przekazac funkcje na przyklad
     // to nie bedzie dzialac w reasonie bo on spodziewa sie array(a)
     {(color) => <button style={{ color }}/>}  
    </WithColor>
  )
}
// alternatywna skladnia ktora bedzie juz dzialac w reasonie
// przewaznie uzywa sie do tego children i/lub render property wiec pol biedy tak na prawde
const Component = () => {
  render (
    <WithColor render={color => <button style={{ color }}/>)/>
  )
}