RenderProps logs

When working with RenderProp components in React we often find ourselves wanting to know the value of the renderProp itself at the place of render. Here is a quick tip for to ease this.

Quick tip

Here is a classic situation where you want to see 'what the hell does "data" contain!?!'.

const MyComponent = () => (
  <RenderProp>
    	{({ data }) => (
        	<DataConsumer data={data} />
        )}
    </RenderProp>
)

You could go ahead and wrap you DataConsumer with curlys, add return and the log ... Ooooooor (pun intended) do this:

const MyComponent = () => (
  <RenderProp>
    	{({ data }) => console.log("> My data::", data) || (
        	<DataConsumer data={data} />
        )}
    </RenderProp>
)

🚀 Go log