0

Alguien sabe como puedo hacer para que cada vez que hago click en un botón me añada nuevos elementos a un array y los pueda visualizar por pantalla en ese mismo instante usando estados en React?

Tal vez sea mejor que esto no sea un estado?

He estado probando con async y await pero no se muy bien como hacerlo, lo que quiero es actualizar mi estado newExample y añadirle otro numero y visualizarlo por pantall en ese mismo instante.

Esto es lo que he intentado:

  async function handleSubmit(e) {
        e.preventDefault();
        newExample.push(e.target[0].value);
        await Promise.resolve(setNewExample(newExample));    
    }

1 respuesta 1

0

Para esto debés utilizar state. El state o estado de un componente es cierta información que este mismo almacena. React está escuchando permanentemente a este estado para que cuando cambie (todo o alguna parte solamente) se vuela a renderizar el componente entero o las partes que dependen del estado que ha cambiado. Esto sucede de manera automática, es la naturaleza de React, de ahí el nombre.

Para utilizar estado en tus componentes tenes que tomar en cuenta que este mismo no es mutable, es decir, cuando tu estado vaya a cambiar, debes reescribir completamente el valor que tenía anteriormente en favor del nuevo valor, como se hace en la programación funcional. Es decir, que por ejemplo, si tuvieses un arreglo y quisiera agregar un elemento, tendrías que cambiar el valor del estado a una copia del arreglo actual al que le agregas el elemento nuevo, en vez de utilizar un push() como haríamos en otros casos. Esto es así para que React se dé cuenta de que los cambios han sucedido y renderice nuevamente.

Para utilizar estado en tus componentes tenés dos alternativas principales, utilizarlo a través del hook useState() o, si estás trabajando con class components, podes inicializar el state como una propiedad estática de la clase. Hoy en día se recomienda altamente la primera, porque te permite trabajar con functional components. La implementación de ambas sería la siguiente:

Functional Components

import {useState} from "react"

const MyComponent = () => {
  const [items, setItems] = useState([])

  const addItem = (newItem) => setItems([...items, newItem]);

  return <button onClick={() => addItem("new value")}>Agregar "new value"</button>
}

Class Components

class MyComponent extends Component {
  state = {
    items = [];
  }

  addItem = (newItem) => {
    // Sobre-escribís el state anterior por el nuevo
    this.setState((prevState) => ({...prevState, [...items, newItem]}));
  }

  // Y ahora podes llamar a `addItem` pasandole el nuevo item que querés agregar al state de tu componente (en este ejemplo `MyComponent`.
  render() {
    return <button onClick={() => this.addItem("new value")}>Agregar "new value"</button>
  }
}

Te recomiendo darle una revisada a los conceptos básicos de React como el state, las props y los life-cycles methods, que acompañan al componente desde su montura hasta su desmontura. Podés utilizar los documentos oficiales donde te proveen algunos ejemplos.

Visualizar listas

Con respecto a lo de visualizar el arreglo a través de un componente, también lo debería encontrar en ejemplos. En el caso de un arreglo lo que debés hacer es iterar sobre los elementos de la lista y retornar un elemento HTML u otro componente por cada uno de ellos, asegurándote de darle una key a cada elemento para identificarlos entre sí. La implementación en functional component sería la siguiente:

const MyComponent = () => {
  const [items, setItems] = useState(["primero", "segundo", "tercero"]);

  return (
    <ul>
      {items.map(item => <p>{item}</p>}
    </ul>
  )
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.