Olá, estou com uma dúvida, como eu consigo fazer um onChange dinâmico com vários itens sendo populados por um array.
Eu tenho o seguinte código
Function e state
const [form, setForm] = useState([
{ typeInput: "input", type: "text", placeholder: "Nome", value: "Nome" },
{ typeInput: "input", type: "email", placeholder: "Sobrenome", value: "Sobrenome" },
{ typeInput: "input", type: "email", placeholder: "Email", value: "Email" },
{ typeInput: "input", type: "email", placeholder: "Telefone", value: "Telefone" },
])
Estou passando assim o meu onChange para mudar o value dos itens, porém não funcionou.
const onChange = (prop, event, index) => {
const old = form[index];
const updated = { ...old, [prop]: event.target.value }
const clone = [...form];
clone[index] = updated;
setForm(clone);
}
Aqui é onde estou populando os items
{form.map((item, index) => (
<div key={index} >
{item.typeInput === "input" &&
<Input type={item.type} placeholder={item.placeholder}
value={item.value} id={item.value}
onChange={e => onChange(item.value, e, index)} />
}
</div>
))
}
Alguém conseguiria me ajudar?
Desde já eu fico agradecida!!