React: Como Remover um Elemento do Array no useState?
Estou tentando remover um item qualquer de uma lista.
O item correto é removido do array, mas na tela é sempre o último que é removido.
Segue o código:
const [properties, setProperties] = useState(props.data.properties);
function remove(prop: IProperty) {
console.log('Prop to remove: ', prop);
setProperties(current => {
let newArray = current.filter(p => p.name != prop.name);
props.data.properties = newArray;
console.log('Properties: ', newArray);
return newArray;
});
}
Obs: estou usando o Next.js
A lista está sendo renderizada em uma div usando index como key?
Se sim, talvez quando o mesmo for removido a re-renderização do react se perde na key.
O correto é utilizar alguma propriedade que não se altera, como id.
O seu código parece correto. Pode tentar criar uma referência nova em memória antes de fazer o filtro.
function remove({name}: IProperty) {
const tempProperties = [...properties];
tempProperties.filter(p => p.name !== name);
setProperties(tempProperties);
}
Tente isso...
const [properties, setProperties] = useState(props.data.properties);
function remove(prop: IProperty) {
console.log('Prop to remove: ', prop);
setProperties(properties.filter(p => p.name !== prop.name));
}