title: React Typescript: How to dynamically add form elements with an onClick function for a Button element?
body: <p>I want to dynamically generate TextFields and then Store their values in an array in the state.</p>
  
  <p>My imports:</p>
  
  <pre><code>import TextField from '@material-ui/core/TextField';
  import Button from '@material-ui/core/Button';
  </code></pre>
  
  <p>I created a button below the TextField. I want to dynamically add TextFields after the button is clicked.</p>
  
  <pre><code>TextField required={true}
      onChange={e =&gt; this.state.book_authors.push(e.target.value)}
      className={this.props.classes.textField}
      label={"Author"}
      variant="outlined"
      type="text"/&gt;
  
  &lt;Button
      variant="contained" color="primary"
      action={() =&gt; this.handleAddAuthorField()}
      className={this.props.classes.button}
  &gt;
      Add Author
  &lt;/Button&gt;
  </code></pre>
  
  <p>My method:</p>
  
  <pre><code> handleAddAuthorField(): JSX.Element {
      return (
          &lt;Row&gt;
              &lt;TextField
                  required={true}
                  onChange={e =&gt; this.state.book_authors.push(e.target.value)}
                  className={this.props.classes.textField}
                  label={"Author"}
                  variant="outlined"
                  type="text"
              /&gt;
          &lt;/Row&gt;
  
      )
  
  }
  </code></pre>
  
  <p>The state, book_authors is to store the TextField inputs as an array. </p>
  
  <pre><code>public state: IsBookState = {
      book_authors: [],
  };
  </code></pre>
  
  <p>After I clicked the button the TextField didn't genereate. </p>