title: How to open Modal based on a function that changes the useState boolean in React?
body: <p>I currently have the following useState and function:</p>
  <pre><code>const [displayTraits, setDisplayTraits] = useState(false);
  
  const feelingsFilled = () =&gt; {
    const keysToCheck = [&quot;anxiety&quot;, &quot;mood&quot;, &quot;cognition&quot;];
    function validate(obj) {
      try {
        if (
          Object.keys(obj)
            .filter((key) =&gt; keysToCheck.includes(key))
            .every((key) =&gt; obj[key].counter &gt; 0)
        ) {
          setDisplayTraits(true);
        } else {
          setDisplayTraits(false);
        }
      } catch (err) {
        console.log(&quot;error&quot;);
      }
    }
  
    validate(daily);
  };
  feelingsFilled();
  </code></pre>
  <p>which I then try to hook up with a modal so that when my function <code>feelingsFilled()</code> return true and changes the <code>displayTraits</code> to true, then it will open.</p>
  <pre><code>&lt;Modal isVisible={displayTraits} /&gt;
  </code></pre>
  <p>I am trying to run this but get the following error</p>
  <pre><code>Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
  </code></pre>