title: React render vs. UseState
body: <p>I'm pretty new to this and can't really figure out how the render works - stuck with UseState for now :) -. Since I see a lot of people using it I wanted to ask for advice on what I'm doing wrong.
  Here are 2 examples one with UseState that works great and other with render that does nothing, I added some style so it looks kind of acceptable for anyone trying it out.</p>
  <p>Any help appreciated, thank you</p>
  <p>// USESTATE</p>
  <pre><code>    const [newColor, setNewColor] = useState('green');
      
        useEffect(() =&gt; {
          setBorder()
        }, [newColor])
      
        function setBorder() {
          if (newColor === 'green') {
            document.getElementById('green').style.borderColor = &quot;orange&quot;;
            document.getElementById('yellow').style.borderColor = &quot;black&quot;;
            document.getElementById('red').style.borderColor = &quot;black&quot;;
        }
        if (newColor === 'yellow') {
            document.getElementById('yellow').style.borderColor = &quot;orange&quot;;
            document.getElementById('green').style.borderColor = &quot;black&quot;;
            document.getElementById('red').style.borderColor = &quot;black&quot;;
        }
        if (newColor === 'red') {
            document.getElementById('red').style.borderColor = &quot;orange&quot;;
            document.getElementById('green').style.borderColor = &quot;black&quot;;
            document.getElementById('yellow').style.borderColor = &quot;black&quot;;
        }
        }
      
        const changeBg = () =&gt; {
          document.body.style.backgroundColor = newColor;
        }
      
        return (
          &lt;div&gt;
          &lt;div style={{width: '240px', height: '88px', border: '3px solid black', 'borderRadius': '10px'}}&gt;
          &lt;div id=&quot;green&quot; onClick={(e) =&gt; setNewColor(e.target.id)}    style={{width: '40px', height: '40px', background: 'green', border: '3px solid black', float: 'left', margin: '20px 0 0 30px', 'borderRadius': '10px', cursor: 'pointer'}}&gt;&lt;/div&gt;
          &lt;div id=&quot;yellow&quot; onClick={(e) =&gt; setNewColor(e.target.id)}   style={{width: '40px', height: '40px', background: 'yellow', border: '3px solid black', float: 'left', margin: '20px 0 0 20px', 'borderRadius': '10px', cursor: 'pointer'}}&gt;&lt;/div&gt;
          &lt;div id=&quot;red&quot; onClick={(e) =&gt; setNewColor(e.target.id)}      style={{width: '40px', height: '40px', background: 'red', border: '3px solid black', float: 'left', margin: '20px 0 0 20px', 'borderRadius': '10px', cursor: 'pointer'}}&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;button onClick={changeBg}&gt;SAVE&lt;/button&gt;
          &lt;/div&gt;
        );
  </code></pre>
  <p>// RENDER</p>
  <pre><code>    class Test1 extends Component {
          constructor(props) {
              super(props);
              this.state = {
                  newColor: 'green'
              }
          }
      
          componentDidUpdate() {
              if (this.newColor === 'green') {
                  document.getElementById('green').style.borderColor = &quot;orange&quot;;
                  document.getElementById('yellow').style.borderColor = &quot;black&quot;;
                  document.getElementById('red').style.borderColor = &quot;black&quot;;
              }
              if (this.newColor === 'yellow') {
                  document.getElementById('yellow').style.borderColor = &quot;orange&quot;;
                  document.getElementById('green').style.borderColor = &quot;black&quot;;
                  document.getElementById('red').style.borderColor = &quot;black&quot;;
              }
              if (this.newColor === 'red') {
                  document.getElementById('red').style.borderColor = &quot;orange&quot;;
                  document.getElementById('green').style.borderColor = &quot;black&quot;;
                  document.getElementById('yellow').style.borderColor = &quot;black&quot;;
              }
          }
      
          render() {
      
              const changeBg = () =&gt; {
                  document.body.style.backgroundColor = this.newColor;
                }
      
      
              return (
                  &lt;div&gt;
                  &lt;div style={{width: '240px', height: '88px', border: '3px solid black', 'borderRadius': '10px'}}&gt;
                  &lt;div id=&quot;green&quot; onClick={(e) =&gt; this.state={newColor: e.target.id}}    style={{width: '40px', height: '40px', background: 'green', border: '3px solid black', float: 'left', margin: '20px 0 0 30px', 'borderRadius': '10px', cursor: 'pointer'}}&gt;&lt;/div&gt;
                  &lt;div id=&quot;yellow&quot; onClick={(e) =&gt; this.state={newColor: e.target.id}}   style={{width: '40px', height: '40px', background: 'yellow', border: '3px solid black', float: 'left', margin: '20px 0 0 20px', 'borderRadius': '10px', cursor: 'pointer'}}&gt;&lt;/div&gt;
                  &lt;div id=&quot;red&quot; onClick={(e) =&gt; this.state={newColor: e.target.id}}      style={{width: '40px', height: '40px', background: 'red', border: '3px solid black', float: 'left', margin: '20px 0 0 20px', 'borderRadius': '10px', cursor: 'pointer'}}&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;button onClick={changeBg}&gt;SAVE&lt;/button&gt;
                  &lt;/div&gt;
                );
          }
      }
  </code></pre>