Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Poniendo en práctica las render props

9/19
Recursos

Aportes 10

Preguntas 13

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Codigo de TodoList en 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)}
          />
        )}
      />

codigo de TodoList en 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()}

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

TodoList

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>
    )
}

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)} //Marcamos el todo como completado
            onDelete={() => deleteTodo(todo.text)} //Eliminamos en todo
            />
        )}
      />

La explicacion es muy clara y se entiende todo, pero Siento que esta clase esta mal enfocada, todo lo que era composicion de componentes se perdio en esta clase, se pasaron props al componente sumandole las render props, quedo un componente mas complejo, esto es realmente util cuando el componente que recibe las render props puede manejar su propio estado

Recomiendo leer la documentación, los ejemplos son bastante buenos aquí:

https://es.reactjs.org/docs/render-props.html

Creo q perdimos las composición de componentes volvemos a útilizar props😅😅😅😅😅😅

Me gusto mucho esta clase, ahora tienen mucho sentido las cosas

El simbolito de pregunta se llama signo de interrogación.

En mi humilde opinión esto es añadirle otro nivel de complejidad a la aplicación y/o al componente (además que utilizar este recurso puede sacrificar un poco le legibilidad del código) por lo que hay que saber muy bien cuándo usarlo…
.
No me parece óptimo que todo lo que se vaya a renderizar adentro de un componente se pase por render props. En dónde sí veo que puede ser necesario usarlo es cuando el children del componente **no nos es suficiente ** y por lo tanto necesitemos de hacer render de un componente en un lugar aparte de donde estarán los children… Espero explicarme bien 😅😁

f1 + backspace + nombredelarchivo … este es un atajo para encontrar rapidamente los archivos,

Me encanto este curso