title: How to change color in react on button click using state
body: <p>i have set up state to change the color of my background</p>
  <pre><code>const [bgClr, setBgClr] = useState('white');
  </code></pre>
  <p>The button whose background colors needs to be changed is</p>
  <pre><code>&lt;Button
              onClick={AnnualHandler}
              variant=&quot;outline-light&quot;
              style={{ background: {bgClr} }}&gt;
              &lt;div
                className=&quot;pt-3 pb-3 ml-3 mr-3&quot;
                style={{ background: '#f8f9fa' }}&gt;
                &lt;h4 style={{ color: 'var(--main)' }}&gt;
                  &lt;b&gt;$ 15&lt;/b&gt;
                &lt;/h4&gt;
              &lt;/div&gt;
            &lt;/Button&gt;
  </code></pre>
  <p>and the handler is</p>
  <pre><code>const AnnualHandler = () =&gt; {
      setBgClr('yellow');
      console.log(bgClr);
    };
  </code></pre>
  <p>But on clicking, the background color is not changing.
  Should useEffect be used here?</p>