Mensaje de empty para búsqueda

Haremos una búsqueda de mensajes usando render props cuando no se encuentre ningún resultado para el texto ingresado.

• Agregaremos unos atributos a nuestro componente de TodoList llamado desde App.

  <TodoList
    ...
    totalTodos={totalTodos}
    ...
    searchText={searchValue}
    ...
    onEmptySearchResults={(searchText) => (
      <p>No hay resultados para {searchText}</p>
    )}
    ...
  />
  

• Validaremos dentro del componente TodoList cuando no encuentre un resultado.

  function TodoList(props) {
    return (
      <section className="TodoList-container">
  			...
        {!!props.totalTodos &&
          !props.searchedTodos.length &&
          props.onEmptySearchResults(props.searchText)}
  			...
      </section>
    );
  }
  

Ajustar componente para renderizar por props y children a la vez

Utilizamos renderFunc como constante para validar lo que se renderiza según lo que exista.

function TodoList(props) {
  const renderFunc = props.children || props.render;

  return (
    <section className="TodoList-container">
      ...

      {props.searchedTodos.map(renderFunc)}
    </section>
  );
}

Archivos de la Clase

Súper poderes para render props y render functions

Poniendo en práctica las render props

React.Children y React.cloneElement