Ideas/conceptos claves

Render Function El patrón de entregar la información en una función es lo que llamamos

Render Prop El patrón de enviar como propiedad una función

Recursos

Entendiendo Render props en React

Apuntes

• Son un patrón que nos ayudan a llevar la composición de componentes a un mayor nivel
• Render Props nos dejan especificar:
  • Que vamos a renderizar
  • Cuando lo vamos a renderizar
  • Donde lo vamos a renderizar

<Provider>
	<Consumer>
		{ something => (
				<TusComponentes
					{...something.xyz}
				/>
		)}
	</Consumer>
</Provider>

• React context se puede utilizar a través de los componentes de Provider y Consumer
  • Con el componente consumer podíamos recibir una función con todas las propiedades que habíamos guardado en el provider, el concepto de esta aplicación es Render Function
• También podemos realizar el siguiente código la cual utiliza Render Props

<RenderProps
	renderProp={<OtroCompo />}
/>

<RenderProps
	renderProp={info => <OtroCompo {...info} />}
/>

Por ejemplo podríamos realizar la siguiente aplicación

<PlatziCourse
	classes={platziClass => (
		<PlatziClassPreview {...platziClass} />
	)}
	lastActivity={question => (
		<PlatziComment q={true} {...question} />
	)}
/>