title: React submit form button won't work without clicking more than once
body: <p>I am working on my first React program, it is the one provided by Sololearn (Contact Manager). I am trying to add a function to search for a contact: SearchName.
  However, I need to click many times on the Search button for it to work. Can someone please tell me where I went wrong?
  For example, typing <em>James Smith</em> in the <em>enter a name to search</em> field first gives &quot;is not in list&quot;. Then when clicked again, it updates to <em>is in list</em>.</p>
  <p>Here is the code:</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import ReactDOM from &quot;react-dom&quot;;
  
  function AddPersonForm(props) {
    const [person, setPerson] = useState(&quot;&quot;);
  
    function handleChange(e) {
      setPerson(e.target.value);
    }
  
    function handleSubmit(e) {
      if (person !== &quot;&quot;) {
        props.handleSubmit(person);
        setPerson(&quot;&quot;);
      }
      e.preventDefault();
    }
    return (
      &lt;form onSubmit={handleSubmit}&gt;
        &lt;input
          type=&quot;text&quot;
          placeholder=&quot;Add new contact&quot;
          onChange={handleChange}
          value={person}
        /&gt;
        &lt;button type=&quot;submit&quot;&gt;Add&lt;/button&gt;
      &lt;/form&gt;
    );
  }
  function RemovePersonForm(props) {
    const [person, setPerson] = useState(&quot;&quot;);
    function handleChange(e) {
      setPerson(e.target.value);
    }
    function handleSubmit(e) {
      props.handleSubmit(person);
      setPerson(&quot;&quot;);
      e.preventDefault();
    }
    return (
      &lt;form onSubmit={handleSubmit}&gt;
        &lt;input
          type=&quot;text&quot;
          placeholder=&quot;enter name to delete&quot;
          onChange={handleChange}
        /&gt;
        &lt;button type=&quot;submit&quot;&gt;Delete&lt;/button&gt;
      &lt;/form&gt;
    );
  }
  
  function PeopleList(props) {
    const arr = props.data;
    const listItems = arr.map((val, index) =&gt; &lt;li key={index}&gt;{val}&lt;/li&gt;);
    return &lt;ul&gt;{listItems}&lt;/ul&gt;;
  }
  function SearchName(props) {
    const [contacts, setContacts] = useState(props.data);
    const [person, setPerson] = useState(&quot;&quot;);
    const [isInList, setIsInList] = useState(false);
    const [text, setText] = useState(&quot;&quot;);
    function handleChange(e) {
      setPerson(e.target.value);
    }
    function handleSubmit(e) {
      setIsInList(false);
      for (var c of contacts) {
        if (c == person) {
          setIsInList(true);
          break;
        }
      }
      if (isInList) {
        setText(&quot;is in list&quot;);
      } else {
        setText(&quot;is not in list&quot;);
      }
  
      e.preventDefault();
    }
    return (
      &lt;form onSubmit={handleSubmit}&gt;
        &lt;input
          type=&quot;text&quot;
          placeholder=&quot;enter name to search&quot;
          onChange={handleChange}
        /&gt;
        &lt;button type=&quot;sumbit&quot;&gt;Search&lt;/button&gt;
        &lt;p&gt;{text}&lt;/p&gt;
      &lt;/form&gt;
    );
  }
  function ContactManager(props) {
    const [contacts, setContacts] = useState(props.data);
  
    function addPerson(name) {
      setContacts([...contacts, name]);
    }
    function removePerson(name) {
      var newContacts = new Array();
      var i = 0;
      for (var c of contacts) {
        if (c != name) {
          newContacts[i] = c;
          i++;
        }
      }
      setContacts(newContacts);
    }
    return (
      &lt;div&gt;
        &lt;AddPersonForm handleSubmit={addPerson} /&gt;
        &lt;RemovePersonForm handleSubmit={removePerson} /&gt;
        &lt;SearchName data={contacts} /&gt;
        &lt;PeopleList data={contacts} /&gt;
      &lt;/div&gt;
    );
  }
  const contacts = [&quot;James Smith&quot;, &quot;Thomas Anderson&quot;, &quot;Bruce Wayne&quot;];
  
  ReactDOM.render(
    &lt;ContactManager data={contacts} /&gt;,
    document.getElementById(&quot;root&quot;),
  );
  
  </code></pre>