I have an array in a useState. and I want to edit a property.
const [equipe_montador, setEquipe_Montador] = useState([]);
<Card title="Adicionar Mão de Obra">
{equipe_montador.map((item, key) =>
<div key={key}>
<InputBox type="number" maxLength={6} title={item.nome} value={item.quantidade} onChange={e => setEquipe_Montador([...equipe_montador, { ...item, quantidade: e.target.value }])} />
</div>
)}
</Card>
But, when I edit the value, the item duplicate.
I've discovered the solution. It's working, but I don't know if is the best approach. I edit the object and create a new list with the edited object.
<Card title="Adicionar Mão de Obra">
{equipe_montador.map((item, key) =>
<div key={key}>
<InputBox type="number" maxLength={6} title={item.nome} value={item.quantidade} onChange={e => {
var new_array = equipe_montador.map((new_obj) => new_obj.id_objeto === item.id_objeto ?
{
...new_obj,
quantidade: e.target.value
} : new_obj);
setEquipe_Montador(new_array);
}
} />
</div>
)}
</Card>