Fazer Loop com Input em 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

Curtir t�pico + 0

Responder