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>
);
}
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>
);
}
Súper poderes para render props y render functions