React add css class dynamically - reactjs

Question

I have a set of tabs and I want to apply different class to the selected tab:
My component:
constructor(props) {
super(props);
this.state = {
activeTab: false,
};
}
setActiveTab = ()=> {
this.state.activeTab=true
}
render() {
return (
<HtmlPage>
<div className="tab">
<InternalLink to={`/settings/user-profile`} >
<div className="tablinks">Nutzerprofil</div>
</InternalLink>
<InternalLink to={`/settings/company-profile`} >
<div className={this.state.activeTab ? 'active':'tablinks'} onClick={this.setActiveTab}>Firmenprofil</div>
</InternalLink>
<InternalLink to={`/settings/user-profile`} >
<div className="tablinks">Nutzerverwaltung</div>
</InternalLink>
</div>
<div className="content">
{this.props.children}
</div>
</HtmlPage>
);
}
And my css:
/* Style the tab */
div.tab {
padding-top: 1%;
overflow: hidden;
border: 1px solid #ccc;
}
/* Style the buttons inside the tab */
div.tab .tablinks {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 20px;
}
/* Change background color of buttons on hover */
div.tab .tablinks:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
div.tab .active {
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 20px;
background-color: #ccc;
}
However, this just sets the class to active for the first clicked tab and not each time I select another tab. How can I fix it?

Answer 1

Set a name for the active tab on click, and then compare while setting the class like
constructor(props) {
super(props);
this.state = {
activeTab: '',
};
}
setActiveTab = (val, e)=> {
this.setState({activeTab: val})
}
<div className="tab">
<InternalLink to={`/settings/user-profile`} >
<div className={this.state.activeTab == 'user-profile' ? 'active':'tablinks'} onClick={this.setActiveTab.bind(this, 'user-profile')}>Nutzerprofil</div>
</InternalLink>
<InternalLink to={`/settings/company-profile`} >
<div className={this.state.activeTab == 'company-profile ? 'active':'tablinks'} onClick={this.setActiveTab.bind(this, 'company-profile')}>Firmenprofil</div>
</InternalLink>
<InternalLink to={`/settings/user-profile`} >
<div className={this.state.activeTab == 'user-profile1 ? 'active':'tablinks'} onClick={this.setActiveTab.bind(this, 'user-profile2')}>Nutzerverwaltung</div>
</InternalLink>
</div>