Render Props en React: Mejora de Componentes con Ejemplo de To-Do List

Curso de React.js: Patrones de Render y Composición

Contenido del curso

Introducción

Composición de componentes

Render props

8
Render Props y Render Functions en React: Patrones Avanzados
06:50 min
9
Render Props en React: Mejora de Componentes con Ejemplo de To-Do List
Viendo ahora
10
Validación y optimización de Render Props y Render Functions en React
12:40 min
11
Uso de React.Children y React.CloneElement para Composición Avanzada
12:05 min

High Order Components

React Hooks

Próximos pasos

19
Patrones de Render en React.js: Principios y Técnicas Avanzadas
01:44 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0013:29

Render Props en React: Mejora de Componentes con Ejemplo de To-Do List

Curso de React.js: Patrones de Render y Composición

Clase 9 de 19

Clase 9 / 19

Recursos

¿Cómo aplicar el patrón Render Props en tu componente To-Do List?

Render Props es un patrón avanzado de React que permite compartir funcionalidad entre componentes a través de una función en lugar de un componente puro. La fuerza de este patrón reside en su flexibilidad, lo que permite a los componentes decidir qué renderizar. En el ejemplo de un To-Do List, podemos mejorar el comportamiento e interacción de la lista utilizando Render Props. ¡Descubre cómo implementarlo eficientemente!

¿Cómo reestructurar tu componente To-Do List?

Para empezar a utilizar Render Props en nuestro componente To-Do List, es necesario modificar la manera en que renderizamos los componentes hijos. En lugar de simplemente renderizar lo que hay en children, podemos ser más específicos y crear propiedades como onError, onLoading y onEmpty.

// Ejemplo de cómo declarar render props en To-Do List
<TodoList 
  error={error}
  loading={loading}
  searchTodos={searchTodos}
  onError={() => <TodoError />}
  onLoading={() => <TodosLoading />}
  onEmpty={() => <EmptyTodos />}
  render={todo => <TodoItem key={todo.id} todo={todo} />}
/>

¿Cómo manejar estados como error o loading?

Dentro del componente To-Do List, podemos usar estas propiedades para decidir qué componente mostrar. Si un error ocurre, podemos renderizar onError; si estamos cargando, mostramos onLoading. De este modo, el componente To-Do List gestiona internamente cuándo mostrar cada uno.

// Ejemplo dentro del componente To-Do List
if (props.error) {
  return props.onError();
} else if (props.loading) {
  return props.onLoading();
} else if (!props.loading && !props.searchTodos.length) {
  return props.onEmpty();
}

¿Cómo implementar la iteración de To-Do Items?

La clave para lograr una implementación efectiva con Render Props es la función render. Esta función recibe un todo y retorna el componente TodoItem. Así, dentro de To-Do List, usamos un .map() sobre searchTodos para aplicar la función render a cada item.

// Usando map para iterar sobre todos
{props.searchTodos.map(todo => props.render(todo))}

¿Cómo afrontar errores comunes?

Errores de Identificación de Componentes: Asegúrate de definir correctamente los componentes como TodosLoading y TodoError y usar las importaciones correctas.
Inexistencia de Propiedades: Verifica que todas las propiedades necesarias para las validaciones sean pasadas y manejadas correctamente desde el lugar donde se usa To-Do List.

La implementación de Render Props optimiza el componente To-Do List, facilitando las personalizaciones y manteniendo el código limpio y modular. ¡Continúa explorando y ajustando para potenciar tus aplicaciones de React!

Max Andy Diaz Neyra

Hace 3 años

Código de la clase en TypeScript (Difiere un poco en organizacion con la del profe, pero lo importante es el tipado)

import { FC } from 'react'

import { TodoButton } from "../TodoButton"
import { TodoCounter } from "../TodoCounter"
import { TodoItem } from "../TodoItem"
import { TodoList } from "../TodoList"
import { TodoSearch } from "../TodoSearch"
import { TodosError } from "../TodoError"
import { EmptyTodos } from "../EmptyTodo"
import { TodosLoading } from "../TodoLoading"
import { Modal } from "../Modal"
import { TodoForm } from "../TodoForm"
import { TodoHeader } from "../TodoHeader"
import { useTodos } from './useTodos'

const App: FC = () => {

  const {
    loading,
    error,
    searchedTodos,
    addTodo,
    completeTodo,
    deleteTodo,
    openModal,
    setOpenModal,
    completedTodos,
    totalTodos,
    searchValue,
    setSearchValue,
  } = useTodos();

  return (
    <>
      <TodoHeader>
        <TodoCounter
          completedTodos={completedTodos}
          totalTodos={totalTodos}
        />
        <TodoSearch
          searchValue={searchValue}
          setSearchValue={setSearchValue}
        />
      </TodoHeader>
      <TodoList
        loading={loading}
        error={error}
        onLoading={()=>(
          <>
            <TodosLoading />
            <TodosLoading />
            <TodosLoading />
          </>
        )}
        onError={()=>(
          <TodosError />
        )}
        onEmpty={()=><EmptyTodos />}
        searchedTodos={searchedTodos}
        render={(todo) => (
          <TodoItem
            key={todo.text}
            text={todo.text}
            completed={todo.completed}
            onComplete={() => { completeTodo(todo.text) }}
            onDelete={() => { deleteTodo(todo.text) }}
          />
        )}
      />
      <TodoButton setOpenModal={setOpenModal} />

      {
        openModal && (
          <Modal>
            <TodoForm
              addTodo={addTodo}
              setOpenModal={setOpenModal}
            />
          </Modal>
        )
      }
    </>
  )
}



export default App

import { FC, ReactNode } from "react";
import { ITodo } from "../App/useTodos";
import './TodoList.css'

interface Props {
    loading: boolean,
    error: boolean,
    searchedTodos: ITodo[],
    onError: ()=>ReactNode,
    onLoading: ()=>ReactNode,
    onEmpty:()=>ReactNode,
    render: (value:ITodo)=>ReactNode,
}

const TodoList:FC<Props> = ({
    loading,
    error,
    searchedTodos,
    onLoading,
    onEmpty,
    onError,
    render
}) => {

    return (
        <ul className="TodoList">
            {loading && onLoading()}
            {error && onError()}
            {(!loading && searchedTodos.length === 0) && onEmpty()}
            { searchedTodos.map(render) }
        </ul>
    )
}

export { TodoList }

Comentarios (51)51 comentarios

Luis Alejandro Nieto Ruth

Hace 5 años

Pedro Moreno

Carlos Andres Poiche Soliz

Hace 4 años

David Acevedo

Reinaldo Mendoza

Cristhian García

Pablo Andres Fajardo Ruano

Orlando Manuel Mendoza Vargas

Juan Castro

Profesor

Alejandro Barba

JOSE RANGEL

Diego Reyes Cabrera

Bryan Figueroa

Douglas Lovera

Sebastian Moreno Olivera

Sergio Moreno Antequera

Ali Norberto Paredes Ramirez

Brian Sánchez Izquierdo

Noe Gonzalez

Javier Silva Avendaño

Guillermo Iván Tabera Bazan

Héctor Eduardo López Carballo

Benjamin Cruz

yeferson soto

Hace 2 años

Andrés Muñoz

Pablo Antipan Quiñenao

Carlos Rubén Díaz Gutiérrez

Mario Arango

Victor Hugo Cruz Carballo

Rodrigo Andrés Moreno Pertúz

Daniel Rojas

Introducción

Patrones de Render en ReactJS: Mejora tu Código y Organización

Principios de Diseño de React: Filosofía y Aplicación Práctica

Composición de componentes

Composición de Componentes en React: Principios y Prácticas

Composición y Colocación de Estado en React con Patrones de Renderización

Optimización de Composición de Componentes en React

Composición Saludable con React Context en Aplicaciones React

Eliminación de React Context mediante Custom Hooks en React

Render props

Render Props y Render Functions en React: Patrones Avanzados

Render Props en React: Mejora de Componentes con Ejemplo de To-Do List

Validación y optimización de Render Props y Render Functions en React

Uso de React.Children y React.CloneElement para Composición Avanzada

High Order Components

Funciones y Componentes de Orden Superior en JavaScript y React

Práctica de High-Order Components en React

Sincronización de Cambios en React con StorageListener

Sincronización de Estados en React con Local Storage

Sincronización y validación de to-do list con local storage

React Hooks

Comparativa de Patrones: Render Props vs React Hooks

Conversión de HighOrder Components a Custom Hooks en ReactJS

Próximos pasos

Patrones de Render en React.js: Principios y Técnicas Avanzadas

Render Props en React: Mejora de Componentes con Ejemplo de To-Do List

Progreso del curso

Introducción

Composición de componentes

Render props

High Order Components

React Hooks

Próximos pasos

Recursos

Recursos