No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Súper poderes para render props y render functions

10/19
Recursos

Aportes 25

Preguntas 7

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

me gusto mucho la mezcla entre render props y render functions, ta potente

La vida de un programador en un video 12 min 40 segundos…

🧑‍💻 Y listo, ingresamos la búsqueda y nos aparece que no hay resultados! 🥳
😳 Ay! Caray! No debería aparecernos el otro texto…
😅 Bueno, lo importante es que nos aparece que no hay resultados para…
😰 Ay! Caray! Esto es otro error!!!

Mi solucion 😕
{props.searchedTodos.map(props.render || props.children)}

Soy el único que piensa que la forma en como están enseñando React en estos dos cursos se hace de lo más enredado posible ? Y sé que sólo me sucede a mi, porque viendo los demás comentarios, todo mundo ama al profesor y su forma de enseñar pero para mí se me hace tan enredado que en una clase enseñe o explique algo y a las siguientes se borre todo o se cambie porque no es la mejor forma, siento como si no tuviera una estructura clara a la hora de enseñar, como que se va improvisando con cada clase, estoy súper enredado con este profesor y su forma de explicar.

Primera vez que veo lo de render props y render functions, tal vez sea porque es algo nuevo para mí, pero lo veo como hacer el código más confuso.

En el App.js:

        totalTodos={totalTodos}
        searchedTodos={searchedTodos}
        searchText={searchValue}

        onEmptySearchResults={(searchText) => (
          <p>No hay resultado para {searchText} </p>
        )}

TodoList.js:

const renderFunc = props.children || props.render;

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

{props.searchedTodos.map(renderFunc)}


Mi solución al reto fue hacerlo utilizando el poder de ES6+:

<ul>
  {props.searchedTodos.map(props.render || props.children)}
</ul>

No hay resultados para

Gracias por la energía en la que enseñas!
{props.searchedTodos.map(props.children)}

Más concretamente, una render prop es una prop que recibe una función que un componente utiliza para saber qué renderizar.

Esta es mi solución declaro una variable y pongo una condición si existe props.children entonces lo iguala a esta variable, en caso de que no exista lo iguala a props.render

Saludos. mi solucion antes de ver la planteada por juan es esta en el TodoList:

{(props.render) && props.searchTodos.map(props.render)} 
{(!props.render) && (
                <ul className="TodoList">
                    {props.searchTodos.map(props.children)}
                </ul>
)} 

Yo tengo un comentario…

Me tienen 🤯, la verdad estoy entendiendo de una forma que me ha retado muchisimo y creo que mis skills lo están agradeciendo.

me interesa pero siento que aumentan las lineas de codigo y no me gusta :c

Mi respuesta al reto

import React from 'react';
import './index.css'

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

      {(!!props.totalTodos && !props.searchedTodos.length) && props.onEmptySearchResults}

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

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

export { TodoList }

En el componente TodoList también se podría validar más rápido.

			{props.filter.map(props.render)}
			{props.filter.length === 0 && props.onEmptySearchTodos()}

Siendo filter el nombre del arreglo filtrado.

mas facil xd

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

Mi solución porfa como sugerencia sería de de mucha ayuda mencionar cuando es buena idea y cuando es mala idea aplicar cada técnica o patron lo que más cuesta es darse cuenta cuando y donde aplicar cada técnica.

import React from 'react';
import './TodoList.css';

const TodoList = ({
  error,
  loading,
  searchedTodos,
  totalTodos,
  onError,
  onLoading,
  onEmpty,
  onEmptySearch,
  render,
  children,
}) => {
  const renderTodoFn = render || children;
  const hasRenderFn = typeof renderTodoFn === 'function';

  return (
    <div className="TodoList-container">
      {error && onError()}
      {loading && onLoading()}
      {!loading && !totalTodos && onEmpty()}
      {!loading && !!totalTodos && !searchedTodos.length && onEmptySearch()}

      <section>
        {hasRenderFn ? <ul>{searchedTodos.map(renderTodoFn)}</ul> : children}
      </section>
    </div>
  );
};
export { TodoList };

Al momento de pasar el searchValue por props al TodoList y hacer todo eso yo lo pase directamente al componente de la render prop.

Mi solución al reto:

en App.js

 {searchedTodos.map((todo) => (
          <TodoItem
            key={todo.text}
            text={todo.text}
            completed={todo.completed}
            onComplete={() => completeTodo(todo.text)}
            onDelete={() => deleteTodo(todo.text)}
          />
        ))}
      </TodoList>

en TodoList.js

      {props.render && props.searchedTodos.map(props.render)}
      <ul>{props.children}</ul>

Me aparece este error cuando lo intento con props.children,
me gustaría que me explicaran el por que sucede

Las funciones no son válidas como hijo de React. Esto puede suceder si devuelve un Componente en lugar de un <Componente /> del render. O tal vez pretendía llamar a esta función en lugar de devolverla.

asi lo pense yo

                {render && tasks.map(render)}
            	{!render && tasks.map(children)}