Fazer Loop com Input em React

HTML

JavaScript

React

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

João Marcelo

Curtidas 0
POSTAR