title: React Passing state to sibling component and up to parent class
body: <p>Very very new to React and I seem to be stuck. This is a simple Todo app, I basically have 3 components, the base component, an input component and a task component. I have figured out how to edit the state within each component but I am having trouble passing state from component to component. </p>
  
  <pre><code>class App extends Component {
      render() {
          return (
              &lt;div id="appContainer"&gt;
                  &lt;HeaderTitle /&gt;
                  &lt;TaskInput /&gt;
                  &lt;Task taskState={true} text="task one" /&gt;
                  &lt;Task taskState={true} text="task two" /&gt;
                  &lt;Task taskState={true} text="task three" /&gt;
              &lt;/div&gt;
          );
      }
  
  }
  
  class TaskInput extends React.Component {
      constructor(props) {
          super(props);
          this.state = {}
      }
      update(e) {
          this.setState({inputValue: e.target.value});
          console.log(this.state);
      }
      taskCreate(e) {
          this.setState({text: this.state.inputValue, completeState: false});
          console.log('button clicked');
          console.log(this.state);
      }
      render () {
          return (
              &lt;div className="taskInputContainer"&gt;
                  &lt;TaskInputField update={this.update.bind(this)} taskCreate={this.taskCreate.bind(this)} /&gt;
              &lt;/div&gt;
          )
      }
  }
  
  
  class Task extends Component {
      constructor(props) {
          super();
          this.state = {
              completeState: false
          }
      }
      toggleTask (e) {
          this.setState({
              completeState: !this.state.completeState
          });
      }
      delete (item) {
  
      }
      render() {
          return (
              &lt;div className="taskContainer" onClick={this.toggleTask.bind(this)}&gt;
                  &lt;div className={"taskState " + this.state.completeState}&gt;&lt;/div&gt;
                  &lt;div className={"taskText " + this.state.completeState }&gt;{this.props.text}&lt;/div&gt;
                  &lt;div className="taskDelete"&gt;&lt;i className="fa fa-times-circle-o" aria-hidden="true"&gt;&lt;/i&gt;&lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  
  const TaskInputField = (props) =&gt;
      &lt;div className="taskInputContainer"&gt;
          &lt;input type="text" className="taskInputField" onChange={props.update}/&gt;
          &lt;i className="fa fa-plus-circle" aria-hidden="true" onClick={props.taskCreate}&gt;&lt;/i&gt;
      &lt;/div&gt;;
  
  Task.propTypes = {
      text: PropTypes.string.isRequired,
      completeState: PropTypes.bool
  };
  Task.defaultProps = {
      text: 'Task',
      completeState: false
  };
  
  const HeaderTitle = () =&gt; (
      &lt;h1&gt;Davids Todo List&lt;/h1&gt;
  );
  
  export default App;
  </code></pre>
  
  <p>So in the TaskInput has its own state that I can update but how do I pass that up to the parent component to update and add a Task component? Also how do I add a Task component without re-rendering the whole thing?</p>