title: React useState Hook - Can't Clear State on Form Data
body: <p>Slightly novice react hooks user here.  Trying to submit a blog post form, consisting of a title, author and URL.  I can submit my form correctly and values are saving in database, but I can't clear the data from the form.  </p>
  
  <p>I'm holding state like this </p>
  
  <pre><code>  const [newBlog, setNewBlog] = useState({ url: "", author: "", title: "" });
  </code></pre>
  
  <p>and handling form change to update state like this:</p>
  
  <pre><code>  const handleBlogChange = e =&gt; {
      const { name, value } = e.target;
      setNewBlog({ ...newBlog, [name]: value });
    };
  </code></pre>
  
  <p>example setup of one my input fields (identical across all three)</p>
  
  <pre><code> &lt;form className="form" onSubmit={addBlog}&gt;
  &lt;div className="col-lg-9"&gt;
                      &lt;input
                        className="form-control"
                        id="title"
                        aria-describedby="emailHelp"
                        placeholder="Enter title"
                        name="title"
                        value={newBlog.title}
                        onChange={handleBlogChange}
                      /&gt;
                    &lt;/div&gt;
  </code></pre>
  
  <p>and this is my addBlog function. you can see where I commented out one version of clearing the state which is causing problems.</p>
  
  <pre><code>const addBlog = event =&gt; {
      event.preventDefault();
  
      const { url, title, author } = newBlog;
  
      const blogObject = {
        url,
        title,
        author
      };
  
      blogService
        .create(blogObject)
        .then(data =&gt; {
          setBlogs(blogs.concat(data));
          showMessage(`Success! ${newBlog.title} by ${newBlog.author} was added`);
          // setNewBlog([...newBlog, { url: "", title: "", author: "" }]);
        })
        .catch(error =&gt; {
          showMessage(
            `Sorry can't add blog. Here's why: ${error.response.data.error}`,
            false
          );
        });
    };
  </code></pre>
  
  <p>I've also tried different variations which are leaving the data in the form, no errors, but not clearing out the form.  Examples of this include</p>
  
  <pre><code>setNewBlog(''), setNewBlog([]) and 
  setNewBlog(newBlog.title='')
  </code></pre>
  
  <p>Nothing is working. </p>