[RESOLVIDO] onChange array dinâmico React

Front-end
, , ,
#1

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!! :smile:

#2

Eu faço assim: (Com o useState)

const [inputList, setInputList] = useState([{time: "", price: ""}]);

const handleInputChange = (e, index) => {
    const {name, value} = e.target;
    const list = [...inputList];
    list[index][name] = value;
    setInputList(list);
};

Pra adicionar/remover:

const handleRemoveInput = (index) => {
    const list = [...inputList];
    list.splice(index, 1);
    setInputList(list)
};

const handleAddInput = () => {
    setInputList([...inputList, {
        time: "x valor",
        price: "x preco"
    }]);
};

    return (
        {
            inputList.map((item, index) => {
                return (
                    <>
                        <input
                            name="time"
                            placeholder="1 Hora"
                            value={item.time}
                            onChange={e => handleInputChange(e, index)}
                        />

                        <input
                            name="price"
                            id='price'
                            placeholder="R$200"
                            value={item.price}
                            onChange={e => handleInputChange(e, index)}
                        />
                    </>
                )
            })
        }
    )
1 curtida
Como construir um JSON dinâmico ReactJs
#3

Putz isso ainda não funcionou pra mim

const handleInputChange = (e, index) => {
    const { name, value } = e.target;
    const list = [...form];
    list[index][name] = value;
    setForm(list);
  };

{form.map((item, index) => (
    <div key={index} >
        <Input type={item.type} placeholder={item.placeholder}
          value={item.value} id={item.value}
          onChange={(e) => handleInputChange(e, index)} />
    </div>
  ))
}

Tem alguma ideia do motivo de não estar funcionando?

#4

mas nao funciona como? dá erro? dá alguma coisa? ja olhou o console?

#5

Ele não retorna erro porém ele só insere a primeira letra que eu inseri.

Esse é o meu console.

(4) [{…}, {…}, {…}, {…}]
0: {typeInput: "input", type: "text", placeholder: "Nome", value: "", "": "a"}
1: {typeInput: "input", type: "email", placeholder: "Sobrenome", value: ""}
2: {typeInput: "input", type: "email", placeholder: "Email", value: ""}
3: {typeInput: "input", type: "email", placeholder: "Telefone", value: ""}

Coloquei um console.log no meu método
     const handleInputChange = (e, index) => {
        const { name, value } = e.target;
        const list = [...form];
        list[index][name] = value;
        setForm(list);
        console.log('form', form)
      };
#6

mostra seu return todo

#7 
export default function Login() {

  const [form, setForm] = useState([
    { typeInput: "input", type: "text", placeholder: "Nome", value: "" },
    { typeInput: "input", type: "email", placeholder: "Sobrenome", value: "" },
    { typeInput: "input", type: "email", placeholder: "Email", value: "" },
    { typeInput: "input", type: "email", placeholder: "Telefone", value: "" },
  ])

  const handleInputChange = (e, index) => {
    const { name, value } = e.target;
    const list = [...form];
    list[index][name] = value;
    setForm(list);
    console.log('form', form)
  };

  return (
    <S.Header>
      <S.Container>
        <S.Card className="bg-secondary shadow border-0">
          <CardBody>
            <Col>
              {form.map((item, index) => (
                <div key={index} >
                  <Input type={item.type} placeholder={item.placeholder}
                    value={item.value} id={item.value}
                    onChange={(e) => handleInputChange(e, index)} />
                </div>
              ))}
            </Col>
          </CardBody>
        </S.Card>
      </S.Container>
    </S.Header>
  )
}
1 curtida
#8

Ata descobri o problema. Você esqueceu de implementar o name no input.

Vc pde fazer assim:

const [form, setForm] = useState([
            {name: 'nome', typeInput: "input", type: "text", placeholder: "Nome", nome: ""},
            {name: 'sobrenome', typeInput: "input", type: "email", placeholder: "Sobrenome", sobrenome: ""},
            {name: 'email', typeInput: "input", type: "email", placeholder: "Email", email: ""},
            {name: 'telefone', typeInput: "input", type: "email", placeholder: "Telefone", telefone: ""},
        ]
    )

e no input:

<Input 
     name={item.name}
     type={item.type} 
     placeholder={item.placeholder}
     id={item.name}
     onChange={(e) => handleInputChange(e, index)} 
/>

E pra acessar algum dado, como o nome por exemplo, vc faz:

 console.log(form[0].nome)

image

1 curtida
#9

Ameii, funcionou!!

Muito obrigada <3

1 curtida