reactjs / reactjs/react.dev

React Hooks docs: add an useContext example where state is updated within a functional component

Abierto
#1,604 6 comentarios 1 reacción 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

question
Lenguaje dominante
JavaScript
Estrellas
11.8k
Forks
7.9k
Merge medio
1 d 11 h
PR fusionados (30 d)
11

Descripción

The React Hooks docs has in the useContext section an example where state is updated within a class component. How is this done within a functional component?

I did this example https://codesandbox.io/s/3vxr57vm7q but I am wondering if it is possible with less DRY, especially in index.js, lines 10-18:

  const [count, setCount] = useState(0)

  return (
    <Context.Provider
      value={{
        count: count,
        setCount: setCount
      }}
    >

With just one state property and one setState function it's ok but imagine you have five of those pairs, then you must repeat every one three times (eg.: count in useState, as key and as property in <Context.Provider />).

Hence, an example would be great and if I did it the right way.

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Línea de trabajo

Comienza con la sección useContext de la documentación de React Hooks y compárala con el CodeSandbox enlazado, especialmente con las líneas 10-18 de index.js. Se considera terminado cuando la sección incluye un ejemplo de componente funcional que muestra cómo se actualiza el estado del contexto y aborda si las propiedades repetidas de state y setter se pueden simplificar.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
javascript, react
Área
documentation
Tipo de issue
Documentación
Dificultad
2/5
Tiempo estimado
1-3 horas
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
45/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.