A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Composici贸n de componentes con React Context

6/19
Recursos

Aportes 9

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Dure como 30 minutos leyendo todos los links de colocaci贸n posteados anteriormente, pero gracias a esa lectura en la pr谩ctica uno incluso puede adelantarse y de inicio saber como ser铆a m谩s 贸ptimo.

Excelente curso Juan, me siento mejor profesional luego de cada video.

Necesito m谩s de estos cursos! De casualidad hacia uno que otro componente as铆 pero no era cociente de esto.

Quisiera hacer una consulta, m谩s del lado buenas pr谩cticas:

const {
    totalTodos,
    completedTodos,

    searchValue, 
    setSearchValue,

    error,
    loading,
    searchedTodos,
    completeTodo,
    deleteTodo,
    openModal,
    setOpenModal,
} = React.useContext(TodoContext);

Yo ordene los valores por orden de aparici贸n de componentes en la vista y los separe con un espacio para digamos tener visibilidad.
.
驴Cu谩l seria la mejor pr谩ctica cuando hay much铆simos valores para enviar con el useContext para mantener el orden y poder ubicarlos f谩cilmente ante cualquier cambio, etc?
.
Porque ac谩 son 10-12 valores, pero donde crece imagino m谩s.
.
Agradezco sus respuestas o links (no hay problema si tengo que leer en otro lado)

De las primeras clases del anterior curso de Introducci贸n, Juancho dije que children era su favorita, intente adelantarme a lo que har铆a y dije: 鈥渁c谩 tiene que ir {children}鈥 y claro que s铆 jaja Que sencillez que tiene React.

Cuando todo funciona 馃ぉ 馃コ, me esta gustando React 馃懇鈥嶐煉

Este video me resolvi贸 1 mes de trabajo!

trate de hacerlo por mi mismo y asi me quedo

return(
<React.Fragment>
  <STCount total={total} completed={completed} />
  <STAdd onAdd={Add} />
    <STList>
       {loading && <p className="STLoading--text">Cargando...</p>}
       {(error && !loading) && (
	  		<p className="STError--text">
						Un error ha ocurrido, porfavor, reinicia la pagina
			  </p>}
       {items.map( target =>{
                    return (
                    <STTask 
                        key={target.id}
                        task={target}
                        completed={target.completed}
                        onComplete={Complete}
                        onDelete = {Delete}
                        onEdit = {setModal}
                        onIncomplete= {setModal}
                        id={target.id}
                    />)
                })}
      </STList>
//no se como se usa ReactDOM.createPortal asi que mande datos a un state modal y que agregara uno solo si me pueden explicar que se hace en este caso se los agradeceria
            {modal.modal && (
                <Modal>
                    {modal.modal == "delete" && (
                        <STIncomplete
                            onDelete={()=>{
                                Delete(modal);
                                setModal(false);
                            }}
                            onCancel = {()=>{
                                setModal(false);
                            }
                    }/>)}
                    {modal.modal == "edit" && (
                        <STEdit
                        task = {modal}
                        onSubmit={(task)=>{
                            Edit(task);
                            setModal(false);
                        }}
                        onCancel = {()=>{
                            setModal(false);
                        }}
                    />)}
                </Modal>
            )}
        </React.Fragment>
)

codigo en TodoHeader

import React from 'react';

function TodoHeader({children}) {
  return (
    <header>
      {children}
    </header>
  );
}

export { TodoHeader };

codigo en AppUI del header

        <TodoHeader>
        	<TodoCounter
          		totalTodos={totalTodos}
          		completedTodos={completedTodos}
        	/>
        <TodoSearch
          searchValue={searchValue}
          setSearchValue={setSearchValue}
        />
      </TodoHeader>

Pero si tengo todo en un solo componente renderizando, cuando haga un cambio de estado me vuelve a renderizar todo, no seria poco efectivo?