is it possible to get multiple input from the input field which is created dynamically in react js?

Question

I am creating a webpage with a form, in which I will be creating an input field dynamically based on the values I got from the backend. I had created the input field, but I don't know how to retrieve the data from each field and send them to the backend when I click add button, I know I can get the input using the target id which will be static, but here in this form, every id is dynamic. Is there is any concept to get the inputs!

This is my code to generate the dynamic input fields.

    class UserInput extends React.Component {
  render() {
    const repinput = (event) => {
      this.setState({
        [event.target.id]: event.target.value,
      });
      console.log({ [event.target.id]: event.target.value });
    };

    return (
      <div className="cell">
        <div className="callout">
          {this.props.example.map((item, i) => (
            <div key={i}>
              <div className="grid-x">
                <div className="cell medium-2">
                  <div className="grid-x">
                    <div className="cell large-12">
                      <label className="labelalignment">
                        <h3> {item.BECname} : </h3>
                      </label>
                    </div>
                  </div>
                </div>

                <div className="cell medium-6">
                  <div className="grid-x">
                    <div className="cell large-12">
                      <label>
                        <input
                          type="text"
                          id={item.BECid}
                          placeholder="10.2"
                          onChange={repinput}
                          required
                        />
                      </label>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          ))}

          <div className="cell medium-12">
            <div className="grid-x">
              <div className="cell large-6">
                <div className=" flex-box">
                  <input className="styled" type="button" value="Add Data" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

This is my output

Answer 1

Try this, I have updated your code

class UserInput extends React.Component {
  repinput = (event) => {
    this.setState({
      [event.target.name]: event.target.value
    });
  };

  onSubmit = () => {
    console.log(this.state);
  };

  render() {
    return (
      <div className="cell">
        <div className="callout">
          {this.props.example.map((item, i) => (
            <div key={i}>
              <div className="grid-x">
                <div className="cell medium-2">
                  <div className="grid-x">
                    <div className="cell large-12">
                      <label className="labelalignment">
                        <h3> {item.BECname} : </h3>
                      </label>
                    </div>
                  </div>
                </div>

                <div className="cell medium-6">
                  <div className="grid-x">
                    <div className="cell large-12">
                      <label>
                        <input
                          type="text"
                          id={item.BECid}
                          placeholder="10.2"
                          onChange={this.repinput}
                          name={item.BECname}
                          required
                        />
                      </label>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          ))}

          <div className="cell medium-12">
            <div className="grid-x">
              <div className="cell large-6">
                <div className=" flex-box">
                  <input
                    className="styled"
                    type="button"
                    value="Add Data"
                    onClick={this.onSubmit}
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}