title: How to save data in an array inside state in react js
body: <p>I have <code>TextField</code> and <code>FlatButton</code> inside the <code>Dialog</code>. I want to save complete task list in an array which I defined in a state.</p>
  
  <pre><code>this.state = {
    open: false,
    todos: [{ id: -1, text: "", completed: false }],
    notetext: ""
  };
  </code></pre>
  
  <p>I am able to get text of <code>TextField</code> from the state. I want to save task in an array on clicking of <code>FlatButton</code>. I have <code>handleCreateNote</code> function which is attached on tap on <code>FlatButton</code>.</p>
  
  <p>I don't know what is the way to add task in an array. Can anyone help me what is the way in the react ?</p>
  
  <pre><code>const AppBarTest = () =&gt;
    &lt;AppBar
      title={strings.app_name}
      iconClassNameRight="muidocs-icon-navigation-expand-more"
      style={{ backgroundColor: colors.blue_color }}
    /&gt;;
  
  class App extends Component {
    constructor(props) {
      injectTapEventPlugin();
      super(props);
      this.state = {
        open: false,
        todos: [{ id: -1, text: "", completed: false }],
        notetext: ""
      };
      this.handleChange = this.handleChange.bind(this);
    }
  
    handleOpen = () =&gt; {
      this.setState({ open: true });
    };
  
    handleClose = () =&gt; {
      this.setState({ open: false });
    };
  
    handleCreateNote = () =&gt; {
      console.log(this.state.notetext);
    };
  
    handleChange(event) {
      this.setState({ [event.target.name]: event.target.value });
    }
  
    render() {
      return (
        &lt;MuiThemeProvider&gt;
          &lt;div&gt;
            &lt;AppBarTest /&gt;
            &lt;FloatingActionButton
              style={styles.fab}
              backgroundColor={colors.blue_color}
              onTouchTap={this.handleOpen}
            &gt;
              &lt;ContentAdd /&gt;
            &lt;/FloatingActionButton&gt;
            &lt;Dialog
              open={this.state.open}
              onRequestClose={this.handleClose}
              title={strings.dialog_create_note_title}
            &gt;
              &lt;TextField
                name="notetext"
                hintText="Note"
                style={{ width: "48%", float: "left", height: 48 }}
                defaultValue={this.state.noteVal}
                onChange={this.handleChange}
              /&gt;
  
              &lt;div
                style={{
                  width: "4%",
                  height: "48",
                  backgroundColor: "red",
                  float: "left",
                  visibility: "hidden"
                }}
              /&gt;
  
              &lt;FlatButton
                label={strings.create_note}
                style={{ width: "48%", height: 48, float: "left" }}
                onTouchTap={this.handleCreateNote}
              /&gt;
            &lt;/Dialog&gt;
  
          &lt;/div&gt;
        &lt;/MuiThemeProvider&gt;
      );
    }
  }
  
  export default App;
  </code></pre>