useState con un JSON
Bien, ya hemos visto como declarar nuestro state y como asignar un valor por default, ahora, quizá realmente necesitamos manejar un objeto como un JSON, ya que quizá, es un formulario y tiene un montón de campos, y obvio, es más fácil usar un JSON.
En el siguiente ejemplo, vamos a usar useState con un JSON y modificaremos el state utilizando el operador spread para combinar los datos nuevos con los antiguos.
import React, {useState} from 'react';
//Componentes funcionales
const Componente = (props)=>{
//Declarar un Hook useState con JSON
const [_json, setJson] = useState({
enteros:0,
texto:"EWebik",
booleanos:true,
}); //Inicialización con un objeto JSON
return(
<div>
<p>{_json.enteros}</p>
<button onClick={()=>{
setJson({
..._json,
enteros: _json.enteros + 1
});
}}>Clic</button>
<p>{_json.texto}</p>
<input type="text" onChange={(e)=>{
setJson({
..._json,
texto: e.target.value
});
}} />
<p>{_json.booleanos ? "True":"False"}</p>
<input type="checkbox" onChange={(e)=>{
setJson({
..._json,
booleanos: e.target.checked
});
}} />
</div>
)
}
ReactDOM.render(
<Componente />,
document.getElementById('root')
);
Del código anterior podemos resaltar que, para acceder a los atributos del JSON debemos realizar notación de punto.
<p>{_json.enteros}</p>
<p>{_json.texto}</p>
<p>{_json.booleanos ? "True":"False"}</p>
Y para actualizar usamos cada función que regresa useState y utilizamos el operador spread.
setJson({
..._json,
enteros: _json.enteros + 1
});
setJson({
..._json,
texto: e.target.value
});
setJson({
..._json,
booleanos: e.target.checked
});
Espero no haberte confundido, recuerda que esta clase cuenta con vídeo donde hago esto paso a paso, quizá te quede más claro.
Array (listas) con useState
Como ultimo ejemplo veremos la asignación y recuperación del estado si este es un array o bien una lista. Es muy similar al ejemplo anterior, así que veamos el código.
import React, {useState} from 'react';
//Componentes funcionales
const Componente = (props)=>{
const [booleanos, setBooleanos] = useState(true);
//Declarar un Hook useState de Lista (Array)
const [lista, setLista] = useState([
{
item:0
},
{
item:1
}
]);
return(
<div>
<button onClick={()=>{
let tLista = lista;
tLista.push({
item: lista.length
});
setLista(tLista);
console.log(tLista);
//setTimeout(() => {
setBooleanos(!booleanos);
//}, 100);
}}>Agregar</button>
<ul>
{
lista.map((item,index)=>(
<li key={index}>{item.item}</li>
))
}
</ul>
</div>
)
}
ReactDOM.render(
<Componente />,
document.getElementById('root')
);
Espero que hayas seguido el curso y que la mayor parte del código te haya quedado claro, ya que, mucho de ello lo hemos visto en clases pasadas, así que, solo me centraré en la parte de la actualización del state.
<button onClick={()=>{
let tLista = lista;
tLista.push({
item: lista.length
});
setLista(tLista);
console.log(tLista);
//setTimeout(() => {
setBooleanos(!booleanos);
//}, 100);
}}>Agregar</button>
- Lo primero que hago es almacenar nuestro state en una variable temporal que podemos modificar.
- Hago un push a la variable temporal para agregar un nuevo dato.
- Actualizamos el state, a través de, setLista(tLista)
Si el código lo dejamos hasta este punto, no veríamos cambios en la DOM, es como si no agregáramos ningún dato al state. Esto es por que el cambio se da dentro del objeto lista, pero la DOM no ve este cambio, así que, necesitamos algo que entere al componente de un cambio de state y realice una actualización.
- Para ello, agregamos el state booleanos y lo actualizamos despues de actualizar la lista
- Con esto el componente actualizará y veremos en la DOM que se agrega un nuevo item a la lista.
Excelente, hemos llegado al final de este post y ya sabes varias maneras en que puedes manipular el Hook de estado use State. Ahora solo debes practicar para aterrizar todos estos conceptos. Nos vemos en el siguiente post.
