Tengo una matriz de objetos en el estado con la siguiente estructura:
const arrayOfTests = [ { id: 1, name: "test1", description: "test description" }, { id: 2, name: "test2", description: "test description" }, { id: 3, name: "test3", description: "test description" } ]Digamos que encuentro un objeto con id de 3 como este:
let object3 = arrayOfTests.find((element) => { return element.id === 3; })Y luego lo edito así:
object3.description = "new description" Estoy un poco confundido sobre cómo usar setState para reemplazar/editar el antiguo objeto 3, con el nuevo actualizado.
Utilice el método map() como se muestra a continuación.
Dentro de la función de devolución de llamada, verifique si la condición element.id === 3 es verdadera; si es así, devolver un nuevo objeto. De lo contrario, devuelve el element actual tal como está.
let newState = arrayOfTests.map((element) => { if (element.id === 3) { return { ...element, description: "new description" }; } return element; }); Pase la matriz devuelta por el método map() a la función de establecimiento de estado.
this.setState({ state: newState });setState((prevState) => ({ ...prevState, arrayOfTests: prevState.arrayOfTests.map((item) => item.id === 3 ? { ...item, description: "new description" } : item ), }));this.setState({ arrayOfTests: arrayOfTests.map(item => { if (item.id === 3) { return { ...item, description: 'new description' } } return item }) })