title: Clear field with useState
body: <p>I have a form, that when submitted, needs to have the input field cleared.</p>
  
  <p>I'm using useState and inside my <code>addNewColor</code> method, I'm resetting the <code>newName</code> state to go back to an empty string. The initial state is an empty string, so I figured I would just call <code>setName(newName)</code> as that's my initial state, but it didn't work. I know there is some way to use <code>prevState</code>, but I haven't gotten my head around it yet. I apologize for the confusing summary. </p>
  
  <p>In short, I'm just trying to clear the field. I'm using Material UI and the name sits within the TextValidator component. </p>
  
  <pre><code>const NewPaletteForm = () =&gt; {
    const [currentColor, setColor] = useState("teal");
    const [colors, setColors] = useState([]);
    const [newName, setName] = useState("");
  
    function addNewColor() {
      const newColor = {
        color: currentColor,
        name: newName
      };
  
      const resetName = {
        name: ""
      };
  
      setName(newName, resetName);
      setColors([...colors, newColor]);
    }
  
    function handleChange(event) {
      setName(event.target.value);
    }
  };
  
  &lt;ValidatorForm onSubmit={addNewColor}&gt;
    &lt;TextValidator
      value={newName}
      onChange={handleChange}
      validators={["required", "isColorNameUnique", "isColorUnique"]}
      errorMessages={[
        "Enter a color name",
        "Color name must be unique",
        "Color is already used"
      ]}
    /&gt;
    &lt;Button
      variant="contained"
      type="submit"
      color="primary"
      style={{ backgroundColor: currentColor }}
    &gt;
      Add Color
    &lt;/Button&gt;
  &lt;/ValidatorForm&gt;;
  </code></pre>