Aquí está mi componente que será mapeado y renderizado varias veces en la aplicación. Cuando hace clic en él, su título se agregará a una lista de arreglos y, si ya se agregó a la lista, se eliminará de la lista de arreglos (alternar):
export default function Card({ title, info, id, list, setList }) { return ( <div className="bg"> <h1 className="color">{id}</h1> <h2 className="color">{title}</h2> <p className="color">{info}</p> <button onClick={() => { if (list.includes(title)) { setList(list.filter((el) => el !== title)); } else setList([...list, title]); }} > click to add </button> </div> ); }La forma en que lo logré fue usando el filtro y {[... lista], título}. Me dijeron que no modificara la matriz directamente y no tengo idea de por qué. Los métodos push y pop podrían haber manejado fácilmente esta lógica. ¿Qué los hace ineficaces?
Citando de los documentos :
Los accesorios son de solo lectura
Ya sea que declare un componente como una función o una clase , nunca debe modificar sus propios accesorios. Considere esta función
sum:function sum(a, b) { return a + b; }Estas funciones se denominan "puras" porque no intentan cambiar sus entradas y siempre devuelven el mismo resultado para las mismas entradas.
Por el contrario, esta función es impura porque cambia su propia entrada:
function withdraw(account, amount) { account.total -= amount; }React es bastante flexible pero tiene una sola regla estricta:
Todos los componentes de React deben actuar como funciones puras con respecto a sus accesorios.
Por supuesto, las interfaces de usuario de las aplicaciones son dinámicas y cambian con el tiempo. En la siguiente sección , presentaremos un nuevo concepto de “estado”. El estado permite que los componentes de React cambien su salida con el tiempo en respuesta a las acciones del usuario, las respuestas de la red y cualquier otra cosa, sin violar esta regla.