Clase práctica en la que modificamos el componente TodoList para que reciba las acciones a realizar a través de render props.

src/App/index.js

<TodoList
  error={error}
  loading={loading}
  searchedTodos={searchedTodos}
  onError={() => <TodosError />}
  onLoading={() => <TodosLoading />}
  onEmptyTodos={() => <EmptyTodos />}
  render={(todo) => (
    <TodoItem
      key={todo.text}
      text={todo.text}
      completed={todo.completed}
      onComplete={() => completeTodo(todo.text)}
      onDelete={() => deleteTodo(todo.text)}
    />
  )}
/>

src/TodoList/index.js

function TodoList(props) {
  return (
    <section className="TodoList-container">  
      {props.error && props.onError()}
      {props.loading && props.onLoading()}

      {!props.loading && !props.searchedTodos.length && props.onEmptyTodos()}

      {props.searchedTodos.map(props.render)}

      <ul>{props.children}</ul>
    </section>
  );
}

Archivos de la Clase

Poniendo en práctica las render props

https://github.com/FROSTYLAN/TodoApp/commit/62ddca40e1dd92d57442f9c1ed77c6e05ee884bc

Qué son las render props y render functions

Súper poderes para render props y render functions