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

score 1 · Accepted Answer · answered Jan 08 '22 at 06:43

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>
    );
  }
}

thanks, bro, it's working that's a simple thing I didn't know, I thought it won't work because of the dynamic id so I thought only about retrieving the data using the id on add button click. — selva surya, Jan 08 '22 at 06:56
I think you are the one who helped me in the last post also, thank you so much!!! :) — selva surya, Jan 08 '22 at 06:59
I need your help, when I send the this.state value to the backend PHP file I am getting a bad string in postman, is there is any way to fix that,{3: '33', 7: '44', 9: '55'} this the value which I got in the console and send to PHP using Axios by appending. the concept here is I need to put the values in two diff. columns 9 in one column id and 55 in another column value vise-versa in three rows @Vishnu Sajeev — selva surya, Jan 08 '22 at 13:35

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

1 Answers1