Fórum Fazer Loop com Input em React #616473

11/08/2021

Preciso adicionar inputs de acordo com o número de produtos que o cliente comprou. Porém estou tendo um pouco de dificuldade pois não estou conseguindo definir o useState para cada campo do meu loop, assim, quando eu altero um campo, todos os outros alteram juntos também. Já tentei diversas coisas, estou nisso a três dias e nada de achar uma solução, irei colocar abaixo o código de minha última tentativa. A principio estou tentar colocar elas dentro de uma Matriz, para depois conseguir colocar tudo no Banco de Dados.

const [quantidadeUsada, SetQuantidadeUsada] = useState([]);
 
    function handleChangeQtdUsada(i, e) {
        var newValues = quantidadeUsada;
        newValues[i] = e.target.value;
        SetQuantidadeUsada({
            values: { values: newValues }
        });
    }
 
    const id_ProdNfe = prods.map(prod => {
        return prod.produtoNfe_id;
    });
 
    var fieldsArray = [];
 
    for(var i = 0; i <= id_ProdNfe; i ++){
    fieldsArray.push(
            <input type='text' value={quantidadeUsada[i]} name={quantidadeUsada[i]} onChange={this.handleChangeQtdUsada.bind(this, i)} />
        );
    }

Estou chamando assim:

<ul className="prods-list">
    {prods.map(prod => (
        <li key={prod.modeloPelicula}>
            <label htmlFor="peliculas">Modelo Pelicula</label>
            <input id="peliculas" type="text" value={prod.modeloPelicula} disabled/>
            <label htmlFor="quantidadeDisponível">Quantidade Disponível</label>
            <input id="quantidadeDisponível" type="text" value={prod.quantidadeComprada} disabled/>
            <div className="inputs"></div>             
        </li>
    ))}
</ul>   

Há alguma forma de fazer isto?

João Marcelo

Curtir tópico

+ 0

Responder