title: Having problem in changing css using useState in react
body: <p>I'm trying to build a modal in react. When it's opened, the background or the body color must change to a darker one and the modal should open, when closed, everything must go back to normal.
  I tried to achieve this by this method:</p>
  <pre><code>const [modalState, setModalState] = useState(false);
  const [modalBg, setModalbg] = useState(false);
  
  function handleClick() {
      setModalState(true);
      setModalbg(true);
      
  }
  return (
    {
        !modalState ?
         null
         : &lt;Modal modalState = {setModalState}/&gt;
    }
    {
        !modalBg ?
         document.body.style.backgoundColor = &quot;ffff&quot;
        : document.body.style.backgoundColor = 'rgba(39, 38, 38, 0.616)'
    }
    &lt;button onClick= {handleClick}&gt;Open&lt;/button&gt;
    
  )
  </code></pre>
  <p>The problem is, that instead of changing color of the body, it just renders text to the page like '#fff' or 'red'. I don't know why that happens, can anyone help?</p>
  <p>Thanks!</p>