title: Change style of the text dynamically React js
body: <p>I want to change some styles of the text of the tab for my navbar. I want to switch between pages whenever I click the on the tab. And for that I want that tab to be active. I have written code as:</p>
  <p>Header.js</p>
  <pre><code>import React from &quot;react&quot;;
  import &quot;./Header.css&quot;;
  import Tab from &quot;./Tab&quot;;
  
   const tabs = [&quot;About&quot;, &quot;Portfolio&quot;, &quot;Blogs&quot;, &quot;Contact&quot;];
  
  const Header = () =&gt; {
    const 
    return (
      &lt;div className=&quot;header&quot;&gt;
        {tabs.map((elem, indx) =&gt; {
          return &lt;Tab key={indx} text={elem} /&gt;;
        })}
      &lt;/div&gt;
    );
  };
  
  export default Header;
  </code></pre>
  <p>Header.css</p>
  <pre><code>.header {
    width: 100%;
    background-color: transparent;
    z-index: 1;
    color: white;
    padding: 1em;
    box-shadow: 2px 2px 2px 2px rgb(66, 65, 65);
  
    display: flex;
    gap: 2em;
    justify-content: flex-end;
  }
  </code></pre>
  <p>Tab.js</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import &quot;./Tab.css&quot;;
  
  const Tab = ({ text }) =&gt; {
    const [active, setActive] = useState(false);
  
    return (
      &lt;div className=&quot;tab&quot;&gt;
        &lt;div
          className={`text ${active &amp;&amp; &quot;active&quot;}`}
          onClick={() =&gt; setActive(true)}&gt;
          {text}
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export default Tab;
  </code></pre>
  <p>Tab.css</p>
  <pre><code>.tab {
    padding: 0.3;
  }
  
  .text {
    font-size: 1.1rem;
  }
  
  .active {
    color: chocolate;
    border-bottom: 1px solid chocolate;
  }
  
  .text:hover {
    color: chocolate;
    cursor: pointer;
  }
  </code></pre>
  <p>Now when I click the tab it becomes active and clicking another tab make both of them active but I   want only one to be active. How can I change the code in order to achieve what I want?</p>