title: How to stop page refresh when function is called - React
body: <p>I am trying to call a function to fetch data from an api and display the data. However when I call this function, the page refreshes and state is reset so the page doesn't display anything.</p>
  <p>In a child component, I have an input box and a form. OnSubmit, this form will save input to state <em>(listOfNames)</em> in the parent component. I concatenate as the state is an array that can be added to at any time to search for more names. Result is displayed in table</p>
  <pre><code>&lt;Form onSubmit={() =&gt; props.setListOfNames(props.listOfNames.concat(localName))}&gt;
      &lt;InputGroup&gt;
          &lt;FormControl type=&quot;text&quot; placeholder=&quot;Add Name&quot; onChange={(e) =&gt; setLocalName(e.target.value)}/&gt;
          &lt;Button variant=&quot;outline-secondary&quot; type=&quot;submit&quot; variant=&quot;primary&quot;&gt;Button&lt;/Button&gt;
       &lt;/InputGroup&gt;
  &lt;/Form&gt;
  </code></pre>
  <p>In the parent I have a UseEffect which detects a change to this state.</p>
  <pre><code>useEffect(() =&gt; {
      searchNames();
  }, [listOfNames]);
  </code></pre>
  <p>On change, it will call a function <em>(searchNames)</em> to fetch data from the api. The fetch function uses the <em>listOfNames</em> state to search .</p>
  <pre><code>const searchNames = () =&gt;{
      //e.preventDefault(); doesn't work even with 'e' as param
  
      fetch(API_URL, {
          method:'POST',
          headers: { &quot;Content-Type&quot;: &quot;application/json; charset=utf-8&quot;},
          body: JSON.stringify(listOfNames)
      })
  //... and so on
  </code></pre>
  <p>However when I call this function the whole page refreshes and the data won't display as the refresh resets <em>listOfNames</em> state to nothing before it can search. I want to know is it possible to pass an event to this function so I may <em>preventDefault()</em> or is there another solution.</p>