title: Two setState functions in one onclick
body: <p><strong>I'm trying to call two functions in a single onclick, however only the first one sets the state.</strong> Following solutions from other answers, I tried calling a single function which would then call the Add() and Del() functions, but that didn't work.</p>
  <p>This is my code:</p>
  <pre><code>
  
      const [obj, setObj] = useState(['door1','mc','start'])
      
      const Add = (a) =&gt; {
          var newObj = [...obj]
          a.map((i) =&gt; newObj.push(i))
          console.log(newObj)
          setObj(newObj)
          console.log(obj)
      }
  
      const Del = (d) =&gt; {
          const newObj = obj.filter((o) =&gt; o!=d)
          console.log(newObj)
          setObj(newObj)
      }
  
  
      return (
          &lt;div class=&quot;main&quot;&gt;
              {obj.includes('start') &amp;&amp; &lt;button className=&quot;btn1&quot; onClick={() =&gt; {Add(['text1']);Del('start')}} &gt;Start&lt;/button&gt;}
              {obj.includes('text1') &amp;&amp; &lt;div className=&quot;text text1&quot; onClick={() =&gt; {Del('text1');Add(['text2'])}}&gt;I've been trapped here for hours&lt;/div&gt;}
          &lt;/div&gt;
      )
  </code></pre>
  <p>In specific, this part:</p>
  <pre><code>{obj.includes('start') &amp;&amp; &lt;button className=&quot;btn1&quot; onClick={() =&gt; {Add(['text1']);Del('start')}} &gt;Start&lt;/button&gt;}
  </code></pre>
  <p>How can I set state twice in one onclick?</p>