title: create TextField dynamically reactjs. Value does not update
body: <p>I need to create textfield (material ui reactjs) dynamically based on the array that I got from an ajax call.</p>
  
  <p>below is the code:</p>
  
  <pre><code>handleChange = (event, something) =&gt; {
              var rNum = event.target.id;
              this.setState(prevState =&gt; ({
                  // R2_1:"adsf",
                  testing: "cccc"
                  // [rNum]: event.target.value,
              }));
          };
           componentDidMount() {
                   this.props.question.responses.map((response) =&gt; {
                      var responseElem = &lt;TextField id='testing' label="Please enter text"
                          value={this.state.testing}
                          onChange={(event) =&gt; { this.handleChange(event) }}
                      /&gt;;
                      this.setState(prevState =&gt; ({
                          responseElems: [...prevState.responses, responseElem]
                      }));
                  });
              }
           render() {
              return (
                  &lt;div className="TextBoxType"&gt;
                      &lt;p dangerouslySetInnerHTML={{ __html: this.props.question.text }} /&gt;
                      {this.state.responseElems}
                  &lt;/div&gt;
              );
          }
  </code></pre>
  
  <p>When I chagne the value of the textfield, it triggers the handlechange event and update the state value. However It does not chagne the actual value in the textField although it is already bound to the state.testing. Can someone please advise? Thanks.</p>