title: How to clear uncontrolled field in react
body: <p>I used to use ref for forms but now I always state for forms, I'm facing an issue where I have to clear a field after user submitted something.</p>
  
  <pre><code>handleSumbit = (e) =&gt; {
          e.preventDefault()
          const todoText = this.state.todoText
          if(todoText.length &gt; 0){
              this.refs.todoTextElem = "" // wont work
              this.props.onAddTodo(todoText)
          } else {
              this.refs.todoTextElem.focus() //worked
          }
      }
  
      render() {
          return(
              &lt;div&gt;
                  &lt;form onSubmit={this.handleSumbit}&gt;
                      &lt;input ref="todoTextElem" type="text" onChange={e =&gt; this.setState({todoText: e.target.value})} name="todoText" placeholder="What do you need to do?" /&gt;
                      &lt;button className="button expanded"&gt;Add Todo&lt;/button&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          )
      }
  </code></pre>
  
  <p>Clearing the ref simply don't work because it's a controlled input. I don't want to do something stupid like</p>
  
  <p>passing a flag from parent component telling the form is submitted then use setState to clear the input. Or make onAddTodo to have a callback so that I can do</p>
  
  <pre><code>this.props.onAddTodo(todoText).then(()=&gt;this.state({todoText:""}))
  </code></pre>