title: Change a state in react
body: <p>I'm learning React and as a learning exercise am trying to do a very basic page where there is a form and you put text in an input box, you click submit and the header changes to what you entered. Here is my code so far:</p>
  
  <pre><code>import React, { Component } from 'react';
  import './App.css';
  
  class App extends Component {
    constructor() {
      super();
      this.state = {header: 'yeaheheh'}
    }
    changeHeader(e) {
      let newHeader = document.getElementById('input').value();
      e.preventDefault();
      console.log('submitted');
      this.setState(newHeader);
    }
    render() {
      return (
        &lt;div&gt;
              &lt;h1&gt;{this.state.header}&lt;/h1&gt;
              &lt;form onSubmit={this.changeHeader.bind(this)} className="change-header-form"&gt;
                  &lt;input id="input" type="text" placeholder="Enter Text Here" /&gt;
                  &lt;input type="submit" value="Submit" /&gt;
              &lt;/form&gt;
            &lt;/div&gt;  
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>At first, when I clicked submit, nothing happened and I got an error in the console that says</p>
  
  <p><code>Uncaught TypeError: Cannot read property 'setState' of null</code></p>
  
  <p>I then realized I needed to bind the <code>changeHeader</code> function to <code>this</code> which I changed so before I had:</p>
  
  <pre><code>&lt;form onSubmit={this.changeHeader}...
  </code></pre>
  
  <p>changed it to</p>
  
  <pre><code>&lt;form onSubmit={this.changeHeader.bind(this)}...
  </code></pre>
  
  <p>After doing this, the error cleared but my header is still not updating.<a href="https://medium.com/@mweststrate/3-reasons-why-i-stopped-using-react-setstate-ab73fc67a42e" rel="nofollow noreferrer">I read that</a> there has been strong suggestions against changing state via setState is bad practice because calling <code>setState()</code> again could potentially alter the changed state. <code>setState</code> is also an asynchronous operation which would also explain why my header isn't changing.</p>
  
  <p>With all that said, then what would be the best way to handle this? From what I understand, <code>props</code> wouldn't make sense either since those values are stored directly in your component and aren't parameters that can't be dynamically updated. I'm having a hard time understanding the relationship between these different data types and how they are handled in the DOM. </p>