react-puro-19
  • React Puro - 19
  • code
    • README
    • README
    • README
    • README
    • README
    • README
    • README
    • README
  • 7-state-en-clases
    • Ejemplo inicial: un contador
    • Manejo de eventos
    • El state
    • Sintaxis limpia en Class Components
    • setState es Asincrónico
    • Fusión superficial vs profunda
  • 5-children
    • Personalizar Children antes de renderizar
    • PropTypes para Children
    • Los Children
    • Diferentes tipos de Children
    • Manejando uso Children
  • 13-hook-usereducer
    • Qué es un Reducer?
    • Un ejemplo más practico
    • Entonces, Redux murió?
  • 4-proptypes
    • Documentación y depuración incluida
    • PropTypes como documentación
    • Cómo validar, formas comunes
    • Ejemplo Tweet con PropTypes
  • 3-props
    • Comunicación con componentes Padre
    • Las Props:
    • Pasar Props
    • Recibir Props
    • Ejemplo Tweet con Props
  • 11-pensando-uso-state
    • "Tipos" de componentes
    • Qué colocar en el State
    • Dónde mantener el estado
    • Pensando declarativamente
  • 9-requests-api
    • Intro
    • Eligir libreria HTTP
    • Obtener datos y mostrarlos
  • 10-state-en-funciones
    • El useState Hook
    • Actualizar State basado en State anterior
    • State como un Array
    • Reglas de los Hooks
    • La "magia" de los Hooks
    • State como un Objeto
    • Intro Hooks
  • 15-api-context
    • Usando React API Context
    • Patrón "Slots"
    • Patrón "Render Props"
    • Intro API Context
    • Otros Patrones de Context
    • Ejemplo perforación de props
    • hook_usecontext
  • 8-ciclo-vida-componente
    • Fases
    • El ciclo
    • Manejo de errores
    • Desmontaje
    • Representación
    • Montaje
  • 14-hook-useeffect
    • Límite cuando se ejecuta un Effect
    • Hacer cambios visibles del DOM
    • Obtener datos (Fetch) con useEffect
    • Intro useEffect
    • Re-obtener datos (Re-Fetch) cuando cambian
    • Solo ejecución en montaje y desmontaje
  • 2-jsx
    • Ejemplo componente Tweet:
    • JSX:
    • Trabajando con JSX:
  • 12-controles-entrada
    • Entradas controladas
    • Entradas no controladas
  • 6-github-file-list
    • Parte 2: la Prop 'key'
    • Parte inicial
  • 1-hola_mundo
    • Hola mundo:
Con tecnología de GitBook
En esta página

¿Te fue útil?

  1. 10-state-en-funciones

State como un Array

El estado puede contener cualquier valor que se desee. Aquí un ejemplo de una lista de números aleatorios. Al hacer clic en el botón, se agrega un nuevo número aleatorio a la lista:

function RandomList() {
    const [items, setItems] = useState([]); // array vacio

    const addItem = () => {
        setItems([
            ...items,
            {
                id : items.length,
                value : Math.random() * 100
            }
        ]);
    };

    return (
    <>
        <button onClick={addItem} > Agregar numero </button>
        <ul>
            {items.map(item => (
                <li key={item.id} > {item.value} </li>
            ))}
        </ul>
    </>
);
}

Observar que se esta inicializando el estado en un array vacio [], y dar vistazo a la función addItem.

La función de actualización de estado (setItems, aquí) no "fusiona" los valores nuevos con los antiguos, sino que sobrescribe el estado con el nuevo valor. Esta es una desviación de la forma en que this.setState funcionaba en las clases.

Entonces, para agregar un elemento al array, se esta utilizando el operador de propagación ES6+ ... para copiar los elementos existentes en el nuevo array e insertar el nuevo elemento al final.

AnteriorActualizar State basado en State anteriorSiguienteReglas de los Hooks

Última actualización hace 5 años

¿Te fue útil?