javascript - submit dynamically created forms / React

Question

I'am developing a dApp using React, the contract has some data and I've created 5 (will be more) forms using map. I'm trying to figure out how to send them separately.

<div className="col-lg-12 row">
  {this.props.documentos.map((documento, key) => {
    return (
      <form
        key={key}
        onSubmit={(event) => {
          event.preventDefault();
          const idDocumento = this.idDocumento;
          const destinatario = this.txtAddressDestinatario.value;
          const precio = this.txtPrecioAcordado.value;

          console.log(idDocumento);
          console.log(destinatario);
          console.log(precio);
        }}
      >
        <div className="card border-primary mb-3 mx-2">
          <div
            className="card-header bg-primary text-white"
            ref={(this.idDocumento = documento.id)}
          >
            {documento.id} # {documento.nombre}
          </div>
          <div className="card-body text-primary">
            <h5 className="card-title">
              Precio realización trámite {documento.precio} ETH{" "}
            </h5>
            <p>
              <input
                id="txtAddressDestinatario"
                type="text"
                ref={(input) => {
                  this.txtAddressDestinatario = input;
                }}
                className="form-control"
                placeholder="Dirección Destinatario"
                required
              />
            </p>
            <p>
              <input
                id="txtPrecioAcordado"
                type="text"
                ref={(input) => {
                  this.txtPrecioAcordado = input;
                }}
                className="form-control"
                placeholder="Monto"
                required
              />
            </p>
          </div>
          <div className="card-footer bg-transparent border-primary d-flex justify-content-center">
            <button className="btn btn-warning mx-2">
              Habilitar Documento
            </button>
            <button className="btn btn-primary mx-2" type="submit">
              Generar Documento
            </button>
          </div>
        </div>
      </form>
    );
  })}
</div>;

What appears in the console is the id 5 and the values ​​of the 5th Form (the last one). So it doesn't matter which form you are typing in, it just takes the values ​​from the last one created.

Image of Forms

I've been trying many ways to make it works. This is also my first "big" project using React. appreciate any advice.

Thanks

标签： javascriptreactjsformssmartcontracts