React: usestate and tab behaviour issue - reactjs

Question

One of my current projects is learning React and coding in general by analyzing and playing with specific code fragments.
But now I'm stuck. I think I know what the problem is, but I can't solve it.
I have 2 tabs. Tab 1 is set as active, so it's content is shown if i vist the site. Tab 2 is set as inactive. If I click on Tab 2, the state is simply switched. This works.
But if I add a third tab as in this example, the behaviour get's weird.
If I click on Tab 2, Tab 3 is set as active as well and both contents are shown.
I would really appreciate some help. I don't want to give up understanding this.
Thanks!
const [main__tab_state, set_main__tab_state] = useState(true);
<div className="main__tab">
<div className="page__flex">
<div className="main__tab--box">
<div className="main__tab--head">
<ul>
<li className={main__tab_state ? "active" : ""}>
<a className="js-tab" data-tab="tab" onClick={() => set_main__tab_state(true)}>TAB NAME 1</a>
</li>
<li className={main__tab_state ? "" : "active"}>
<a className="js-tab" data-tab="tab1" onClick={() => set_main__tab_state(false)}>TAB NAME 2</a>
</li>
<li className={main__tab_state ? "" : "active"}>
<a className="js-tab" data-tab="tab2" onClick={() => set_main__tab_state(false)}>TAB NAME 3</a>
</li>
</ul>
</div>
</div>
<div className="main__tab--box">
<div className="main__tab--body js-tab__body">
<div id="tab" className={`main__tab--item${main__tab_state ? "active" : ""}`}>
<div className="text">
<p>
TAB TEXT 1
</p>
</div>
</div>
<div id="tab1" className={`main__tab--item${main__tab_state ? "" : "active"}`}>
<div className="text">
<p>
TAB TEXT 2
</p>
</div>
</div>
<div id="tab2" className={`main__tab--item${main__tab_state ? "" : "active"}`}>
<div className="text">
<p>
TAB TEXT 3
</p>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

Use const [activeTabIndex, setActiveTabIndex] = useState(0); instead.
Then just kodify your code like so:
<a className="js-tab" data-tab="tab" onClick={() => setActiveTabIndex(0)}>TAB NAME 1</a>
<div id="tab" className={`main__tab--item${activeTabIndex === 0 ? "active" : ""}`}>

Answer 2

First of all you need to change your state.
const [main__tab_state, set_main__tab_state] = useState("tab1"); // change state to store string values and default we will store tab1
Change your code to render tabs and content like below:-
<div className="main__tab">
<div className="page__flex">
<div className="main__tab--box">
<div className="main__tab--head">
<ul>
<li className={main__tab_state === "tab1" ? "active" : ""}>
<a className="js-tab" data-tab="tab" onClick={() => set_main__tab_state("tab1")}>TAB NAME 1</a>
</li>
<li className={main__tab_state === "tab2" ? "" : "active"}>
<a className="js-tab" data-tab="tab1" onClick={() => set_main__tab_state("tab2")}>TAB NAME 2</a>
</li>
<li className={main__tab_state === "tab3" ? "" : "active"}>
<a className="js-tab" data-tab="tab2" onClick={() => set_main__tab_state("tab3")}>TAB NAME 3</a>
</li>
</ul>
</div>
</div>
<div className="main__tab--box">
<div className="main__tab--body js-tab__body">
<div id="tab" className={`main__tab--item${main__tab_state === "tab1" ? "active" : ""}`}>
<div className="text">
<p>
TAB TEXT 1
</p>
</div>
</div>
<div id="tab1" className={`main__tab--item${main__tab_state === "tab2" ? "" : "active"}`}>
<div className="text">
<p>
TAB TEXT 2
</p>
</div>
</div>
<div id="tab2" className={`main__tab--item${main__tab_state === "tab3" ? "" : "active"}`}>
<div className="text">
<p>
TAB TEXT 3
</p>
</div>
</div>
</div>
</div>
</div>
</div>