No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso de React.js

Curso de React.js

Juan David Castro Gallego

Juan David Castro Gallego

useContext

23/34
Recursos

Aportes 17

Preguntas 6

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Al principio me pareci贸 un poco confuso usar TodoContext.Provider, con useContext() es muchisimo m谩s sencillo y legible!

Hola Comunidad Platzi! Gracias al profe Juan y su equipo excelente trabajo. Les dejo mi aporte, un resumen sobre el Context de React, el useContext y un paso a paso de c贸mo se lo aplic贸 para migrar la l贸gica de proveer informaci贸n desde la funci贸n App hacia el TodoContext y luego el consumo de este Context.
Aqu铆 el link del pdf:
https://drive.google.com/file/d/1hb9M_Tw9Stc_VFfxLqj6ZeLqa77y2x21/view?usp=sharing
Aqu铆 un preview del documento, espero les sea de utilidad!

Seg煤n la documentaci贸n nueva oficial de React, manifiestan que no es recomendado usar Consumer y que poco a poco empezara a entrar en desuso, Entonces viva, useContext.

Direferncias al usar Context.Consumer con useContext.

Cuando necesitamos pasar los datos establecidos en el Context:

function TodoProvider({children}){
	// Funcionalidades del provider
	return (
    <TodoContext.Provider>
			{children}
		</TodoContext.Provider>
	)
}

La principal diferencia es el uso de TodoContext.Consumer dentro del componente que queramos comunicar con las props. Y el metodo por useContext que no implica pasar como si fuera un componente la sintaxis del Consumer.

  • Consumer: Acepta una funcion de renderizado:
<TodoContext.Consumer>
	{
		({ props necesarias }) => { // Todos los componentes para pasar las props }
	} 
</TodoContext.Consumer>
  • useContext: Similar al uso del hook useState solo se declaran las props necesarias dentro del componente.
const { props necesarias } = useContext(TodoContext)

Gracias a esa explicacion de la clase Que es React Context, ahora tiene sentido como se trae el contexto con el hook useContext.

Desde la clase anterior cuando implementamos Context mi app se muri贸 馃槮

UYY que bueno, mucho m谩s limpio y f谩cil!!!

React.useContext god

Muy Bueno la combinaci贸n de TodoContext y el useContext.
El TodoContex nos permite exponer parametros de manera general en el app mediante el TodoContext.provider. Y mediante el TodoContext.consumer recuperamos los parametros expuestos pero esto resulta algo que ensucia el codigo, es por ello que usamos el hook useConext.

Super cool, no conoc铆a esto. Antes usaba solo Redux

Si alguna vez les llega a salir este error

Me sale este error 鈥淭ypeError: render is not a function

Ese error se da ya que posiblemente en tu app() en el componente estas llamando al Context, lo que tienes que hacer es llamar a la funcion y no al Context

De la siguiente manera:

functionApp() {
  return (
    <TodoContext>
      <AppUI/>
   </TodoContext>
    
  );
}
 

en esta linea de codigo lo que estas llamando es el Context en general y sino estoy mal lo que esta haciendo es renderizando por lo tanto sale el error, lo mas recomendable es crear una funcion en donde podamos tener toda la parte de los componentes y la logica en esa funcion

Dicho esto deberia quedar el codigo en la clase App asi:

//Esta funcion es un componente 
functionApp() {
  return (
    <TodoProvider>
      <AppUI/>
   </TodoProvider>
    
  );
}

El <TodoProvider> hace referencia al nombre de mi funci贸n

Bueno pues en el momento de las clases anteriores donde el profe creo el componente AppUI , pues yo preferi no hacerlo y segui con el app normal metiendo todo ahi.

Esto me llevo a un peque帽o problema al querer recrear lo que el profesor hizo en el video.

No podemos usar el provider en el mismo lugar donde vamos a usar el useContext.
Me toco ponerlo en el index.js para que luego en el componente App me permitiera usar el use context.

Si le dejaba el provider ahi, pues se rompia todo

Asi que lo elimine de ahi y le deje las <>...</> y ya.

Por si a alguien mas le pasa, pues nada ese es el motivo que no funcione bien

Que alivio esta forma de escribir un contexto 馃檪馃

Proyecto en codigo TS:

import { FC, useContext } from "react";
import { TodoContext } from "../TodoContext";
import './TodoCounter.css'

const TodoCounter:FC = () => {

    const {
        completedTodos,
        totalTodos
    } = useContext(TodoContext)
 
    return (
        <h1 className="TodoCounter">Has completado <span>{completedTodos}</span>  de <span>{totalTodos}</span></h1>
    )
}

export { TodoCounter }

import { FC, useContext } from "react";
import { TodoContext } from "../TodoContext";
import './TodoSearch.css'

const TodoSearch:FC = () => {

    const {
        searchValue,
        setSearchValue
    } = useContext(TodoContext)

    return (
       <input 
        type="text" 
        className="TodoSearch" 
        placeholder="Ingresar nombre de tarea buscada" 
        value={searchValue}
        onChange={(event)=>{
            setSearchValue(event.target.value)
        }}
    />
    )
}

export { TodoSearch }

import { FC, useContext } 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 { TodoContext } from "../TodoContext"

export const AppUI:FC = () => {

  const {
    loading,
    error,
    searchedTodos,
    completeTodo,
    deleteTodo,
  } = useContext(TodoContext);

  return (
    <>
      <TodoCounter />
      <TodoSearch  />
      <TodoList>
      {loading && (
        <>
          <TodosLoading />
          <TodosLoading />
          <TodosLoading />
        </>
      )}
      {error && <TodosError />}
      {(!loading && searchedTodos.length === 0) && <EmptyTodos />}
      {
        searchedTodos.map(todo=>(
          <TodoItem
            key={todo.text}
            text={todo.text}
            completed={todo.completed}
            onComplete={()=>{completeTodo(todo.text)}}
            onDelete={()=>{deleteTodo(todo.text)}}
          />
        ))
      }
      </TodoList>
      <TodoButton />
    </>
  )
}


ME ENCANTO ESTA CLASE!

  • import { Contexto } from 鈥./direccionContexto/鈥

  • const { value } = React.useContext(Contexto)

  • useContext acepta un objeto de contexto (el valor devuelto de React.createContext) y devuelve el valor de contexto actual. El valor actual del contexto es determinado por la propiedad value del <MyContext.Provider> ascendentemente m谩s cercano en el 谩rbol al componente que hace la llamada.

Les comparto una forma en la que me parece interesante exportar nuestros contexts. Esto ser铆a creando nuestro propio hook para dicho context as铆:

// useStateContext.js

import React, { createContext, useContext } from "react";

const Context = createContext();

export const StateContext = ({ children }) => {
    // ... Toda nuestra l贸gica

    return (
        <Context.Provider value={{
            // ... Nuestros valores a exportar
        }}>
            {children}
        </Context.Provider>
    );

}

export const useStateContext = () => useContext(Context);


Como puedes ver, as铆 exportar铆amos nuestro StateContext y nuestro useStateContext, el cual ya utiliza el useContext; de esta forma, en los componentes podremos importarlos as铆:

// TuComponente.js

import { useStateContext } from '../Context/useStateContext';

function TuComponente() {

	const {...tus valores a importar} = useStateContext();

	return(
		<></>
	);

}


As铆 ya no tendremos que estarle indicando qu茅 contexto queremos usar. Y en caso de tener varios contextos como nos ense帽a Juan, por ejemplo tener uno para los usuarios, otro para validaciones, ordenes鈥 ser铆a tan sencillo como importar dicho contexto y llamarlos como useUserContext(), useValidationContext(), useOrderContext()鈥 seg煤n corresponda. 馃榾

Un dato importante que pude observar. Para el caso de no utilizar useContext() dentro de un componente, este ultimo envuelto por un provider. No se renderiza dicho componente en caso cambie alg煤n estado del hook context. Al inicio pens茅 que se renderizar铆a por estar envuelto por el provider.