title: Clearing state and input values between parent and child components in React
body: <p>Two part question here: First, can anyone explain to me why this.state.taskName and this.state.taskBody and their corresponding inputs aren't clearing after submitting the form? In handleSubmit() I'm using this.setState() to set their states to an empty string, but it doesn't seem to be working. It also wont let me submit more than once, which I suspect might have to do with the state not clearing.</p>
  
  <p>Second, what would be the best way to push a task with multiple key-value pairs into the this.state.tasks array? I tried storing taskName and taskBody as an object in state, and also tried pushing the them into an object and then displaying them, but couldn't get it to work.</p>
  
  <p>Here are parent, child, &amp; sibling files:</p>
  
  <pre><code>import React, { Component } from 'react';
  import Task from './Task/Task';
  import NewTaskForm from './NewTaskForm/NewTaskForm';
  
  class Board extends Component {
      constructor(props) {
          super(props);
  
          this.handleSubmit = this.handleSubmit.bind(this);
          this.handleChange = this.handleChange.bind(this);
  
          this.state = {
              tasks: [],
              taskName: '',
              taskBody: ''
          };
      }
  
      handleSubmit(e) {
          e.preventDefault();
          let updatedTasks = this.state.tasks;
          let taskName = this.state.taskName;
          let taskBody = this.state.taskBody;
  
          updatedTasks.push(taskName, taskBody);
          let updatedName = '';
          let updatedBody = '';
          this.setState({ tasks: updatedTasks, taskName: updatedName, taskBody: updatedBody });
      };
  
      handleChange(e) {
          this.setState({ [e.name]: e.value });
      }
  
      render() {
          return (
              &lt;div&gt;
                  &lt;NewTaskForm
                      onSubmit={this.handleSubmit}
                      onChange={this.handleChange}
                  /&gt;
                  &lt;Task
                      tasks={this.state.tasks}
                  /&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default Board;
  
  
  import React, { Component } from 'react';
  
  class NewTaskForm extends Component {
      constructor(props) {
          super(props);
  
          this.handleChange = this.handleChange.bind(this);
      }
  
      handleChange(e) {
          this.props.onChange(e.target);
      }
  
      render() {
          return (
              &lt;form onSubmit={this.props.onSubmit}&gt;
                  &lt;label&gt;Task Name&lt;/label&gt;
                  &lt;input
                      name="taskName"
                      required type="text"
                      value={this.props.taskName}
                      onChange={this.handleChange}
                      placeholder="Enter a task name"
                  /&gt;
  
                  &lt;label&gt;Task Body&lt;/label&gt;
                  &lt;input
                      name="taskBody"
                      required type="text"
                      value={this.props.taskBody}
                      onChange={this.handleChange}
                      placeholder="Enter a task body"
                  /&gt;
  
                  &lt;button
                      type="submit"
                      className="btn btn-default"
                  &gt;Add Task
                  &lt;/button&gt;
              &lt;/form&gt;
          );
      }
  }
  
  export default NewTaskForm;
  
  
  import React, { Component } from 'react';
  
  class Task extends Component {
      render() {
          let taskList = this.props.tasks.map((task, i) =&gt; {
              return (
                  &lt;li key={i}&gt;
                      {task}
                  &lt;/li&gt;
              );
          });
          return (
              &lt;ul&gt;
                  {taskList}
              &lt;/ul&gt;
          )
      }
  }
  
  export default Task;
  </code></pre>
  
  <p>Thanks!</p>