Las render props son una técnica avanzada que nos permite reutilizar componentes y lógica, para no tener que reinventar la rueda. Esta técnica se basa en pasar una función como prop a un componente, dicha función se encargará de renderizar lo que queremos que contenga este componente, removiendo así la lógica del render hacia otra parte y permitiéndonos reutilizar la lógica que contenga la función.

import React, {useState} from 'react';

export default function App() {
	const people = [
		{name: 'Maria', age: 30, id: 1},
		{name: 'Phoebe', age: 20, id: 2},
	]

	return (
    <ListOfPeople
      data={people}
      render={
        ({name, id}) => (<h2 key={id} >Hello, I am { name }</h2>)
      } 
      />
	)
}

const ListOfPeople = ({render, data}) => {
	return (
    <>
      <h1>My list of people</h1>
      {data.map((person) => render(person))} 
			{/*iteramos sobre nuestro array de personas y llamamos a la función render que recibimos en nuestras props, y además le pasamos la información de cada persona. */}
    </>
	)
}

En el ejemplo anterior renderizamos una lista con el nombre de varias personas, pero el contenido de nuestra lista no lo define el componente ListOfPeople, sino App por medio de la función render que le pasamos a ListOfPeople en sus props.