title: is it possible to get multiple input from the input field which is created dynamically in react js?
body: <p>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!</p>
  <p>This is my code to generate the dynamic input fields.</p>
  <pre><code>    class UserInput extends React.Component {
    render() {
      const repinput = (event) =&gt; {
        this.setState({
          [event.target.id]: event.target.value,
        });
        console.log({ [event.target.id]: event.target.value });
      };
  
      return (
        &lt;div className=&quot;cell&quot;&gt;
          &lt;div className=&quot;callout&quot;&gt;
            {this.props.example.map((item, i) =&gt; (
              &lt;div key={i}&gt;
                &lt;div className=&quot;grid-x&quot;&gt;
                  &lt;div className=&quot;cell medium-2&quot;&gt;
                    &lt;div className=&quot;grid-x&quot;&gt;
                      &lt;div className=&quot;cell large-12&quot;&gt;
                        &lt;label className=&quot;labelalignment&quot;&gt;
                          &lt;h3&gt; {item.BECname} : &lt;/h3&gt;
                        &lt;/label&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div className=&quot;cell medium-6&quot;&gt;
                    &lt;div className=&quot;grid-x&quot;&gt;
                      &lt;div className=&quot;cell large-12&quot;&gt;
                        &lt;label&gt;
                          &lt;input
                            type=&quot;text&quot;
                            id={item.BECid}
                            placeholder=&quot;10.2&quot;
                            onChange={repinput}
                            required
                          /&gt;
                        &lt;/label&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            ))}
  
            &lt;div className=&quot;cell medium-12&quot;&gt;
              &lt;div className=&quot;grid-x&quot;&gt;
                &lt;div className=&quot;cell large-6&quot;&gt;
                  &lt;div className=&quot; flex-box&quot;&gt;
                    &lt;input className=&quot;styled&quot; type=&quot;button&quot; value=&quot;Add Data&quot; /&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  <p>This is my output</p>
  <p><a href="https://i.stack.imgur.com/og9oJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/og9oJ.png" alt="Input fileds with output in console" /></a></p>