title: How can I update class name with usestate to activate the necessary css conditions? Updating tab id seems problematic
body: <p>Relatively new to react/typescript (my third project).</p>
  <p>I am currently building a custom dynamic tab component. In my component, I am dynamically creating a class name which I use to determine which tab is active and which is not. It seems to be working though upon observation there seems to be some errors.</p>
  <p>The objective is to include a background colour when the active tab is clicked to show the user that this is the tab they are now viewing. The full code is below though I have included snippets of the issue in these sub-sections:</p>
  <ol>
  <li>I have created a state which changes based on which tab is clicked on. Once clicked, the active tab state is set to the current tab's index. If the state equates to the index of the current tab the class name changes to include active tab. But when I check via the console the value of the active tab id, it does not seem to be equating to the actual index of the current tab.</li>
  </ol>
  <pre><code>    const [btnState, setBtnState] = useState({activeTabId: 0});
      const onClick = (id:number) =&gt; {
              setBtnState({activeTabId:id})       
          
             console.log(btnState.activeTabId, id);
            };
  </code></pre>
  <ol start="2">
  <li>After going through some online content, it appeared that the state was not updating instantaneously. After amendments, the console log indicated the active id was now updating in line with the current tab. But the css conditions were not not behaving as expected. Instead of the class name changing to active tab upon clicking the active tab, it would only show on the previous tab (the previous tab's class name would include the active tab whilst the current tab would not).</li>
  </ol>
  <pre><code>
      const [btnState, setBtnState] = useState({activeTabId: 0});
      const onClick = (id:number) =&gt; {
              btnState.activeTabId = id
              setBtnState(btnState)       
          
           console.log(btnState.activeTabId, id);
            };
  </code></pre>
  <p>Could someone please explain what I am doing wrong? Why does the first one work even though the active id is not accurate but the second &quot;somewhat&quot; (well doesn't really) works with the correct active id? The relevant tag in question is the <code>&lt;li&gt;</code></p>
  <pre><code>import React, { ReactNode } from &quot;react&quot;
  import { useState } from &quot;react&quot;
  
  function MyComponent (props: ComponentProps) {
      
    const [tab, setTab] = useState([{ title: &quot;&quot;}])
    const [btnState, setBtnState] = useState({activeTabId: 0});
  
    const newTab = () =&gt; {
      setTab([...tab, {title: &quot;&quot;}])
  
    }
  
    const deleteTab = (index:number) =&gt; {
      const list = [...tab]
        list.splice(index, 1)
        setTab(list)
  
    }
  
    const handleTabChange = (e:React.ChangeEvent&lt;HTMLInputElement&gt;, index:number) =&gt; {
      const {name, value} = e.target
      const list = [...tab]
      list[index][name] = value
      setTab(list)
    
    }
  
  const updateActiveId= (id:number) =&gt; {
      setBtnState({activeTabId:id})       
  
      console.log(btnState.activeTabId, id);
    };
  
  
  const activeNav = (id:number) =&gt; {
      if (id === btnState.activeTabId) {
        return &quot;individual-tab-container tab-selected&quot;;
      } else {
        return &quot;individual-tab-container&quot;;
      }
    };  
  
  
  return (
      &lt;div className=&quot;dynamic-tabs&quot;&gt;
        &lt;ul className=&quot;all-tabs&quot;&gt;
        {tab.map((tabTitle, index) =&gt; (
          &lt;span className=&quot;dynamic-tab-container&quot;&gt;
          &lt;li key={index} onClick={() =&gt; updateActiveId(index)} className={activeNav(index)}&gt; 
            &lt;span className=&quot;title-close-save-button-container&quot;&gt;
              &lt;input className=&quot;title-of-tab&quot; 
                      name=&quot;title&quot;
                      type=&quot;text&quot;
                      required
                      placeholder=&quot;Click to rename tab here&quot; 
                      size={20}
                      maxLength={20}
                      value = {tabTitle.title}
                      onChange={(e) =&gt; handleTabChange(e, index)}/&gt;    
                      
              &lt;div className=&quot;save-close-btn-container&quot;&gt;
              &lt;div className=&quot;save-button-container&quot;&gt;
                &lt;button id=&quot;save&quot;&gt;save&lt;/button&gt;&lt;/div&gt;
              &lt;div className=&quot;close-btn-container&quot;&gt; 
              &lt;button type=&quot;button&quot; className=&quot;close-btn&quot; onClick={() =&gt; deleteTab(index)}&gt;
                &lt;div className=&quot;close-btn-txt&quot;&gt;&amp;times;&lt;/div&gt;
                &lt;/button&gt;   
                
                &lt;/div&gt; 
                &lt;/div&gt;  
              &lt;/span&gt;       
            &lt;/li&gt;   
            &lt;/span&gt;
      ))}
    &lt;/ul&gt;
      &lt;span className=&quot;new-tab-btn-container&quot;&gt;
        &lt;button type='button' className=&quot;new-tab-btn&quot; onClick={newTab}&gt;
        &lt;i className=&quot;material-icons&quot; id=&quot;add-btn&quot;&gt;add&lt;/i&gt;&lt;/button&gt;
      &lt;/span&gt;
      
  
  
      &lt;/div&gt;
    )
  }
  </code></pre>
  <p>CSS - just to test the functionality of the active tab</p>
  <pre><code>.dynamic-tabs{
      position: relative;
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
      height: 120px;
      border: 2px solid green;
      width:94%;
              
  }
  
  .dynamic-tab-container{
      display: flex;
  }
  
   li {
      list-style-type: none;
   }
  
  .all-tabs{
      display: flex;
      height: 80px;
  }
  
  .dynamic-tab-container{
      border-bottom: 2px solid #d3d2d2;
      border-right: 2px solid black;
      border-left: 2px solid black;
      border-top: 2px solid black;
      margin-top: 7px;
      height: 110%;
      width: 360px;
  }
  
  .title-close-save-button-container{
      display: flex;
      margin-top:6.5%;
      flex-flow: row; */
  }
  
  input{
      margin-left:2%;
      margin-top:4%;
      border:none;
      font-family: 'Hi Melody', cursive;
      font-size: 14px;
      font-weight:500;
  }
  
  
  input:focus{
      outline:none;
  }
  
  button{
      background: none;
      border: none;
  }
  
  button:active{
      outline: none;
  }
  
  button:focus{
      outline: none;
  }
  
  .save-close-btn-container{
      display: flex;
      margin-left: 16%;
      margin-top: 4%;
      transition: margin-left 200ms;
      font-family: 'Hi Melody', cursive;
      font-weight:300;
  }
  
  .new-tab-btn-container{
      display: flex;
      position: fixed;
      margin-left: 95%;
      top:7%;
      height:60px;
      border-right: 2px solid black;
      border-left: 2px solid black;
      border-top: 2px solid black;
      border-bottom: 2px solid black; 
  }
  
  .tab-selected{
      background-color: red;
  }
  </code></pre>