Add a class and remove class from another in ReactJS - reactjs

Question

I want to create a tab using ul and li and the tab will be shown the same content which is selected and should be show a button which is send me to the next tab and that will be active for indication which tab is showing to me
render() {
return (
<div>
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="tab-menu-1">Tab 1 Content <button>Move to Tab 2</button></div>
//in default it should show the tab 1 content only and When i Press this button on above Div it should be moved to next tab and the class name will be transfer to the tab 2 on <li>
<div id="tab-menu-2">Tab 2 Content <button>Move to Tab 2</button></div>
//in default it should show the tab 2 content only and When i Press this button on above Div it should be moved to next tab and the class name will be transfer to the tab 3 on <li>
<div id="tab-menu-3">Tab 3 Content <button>Move to Tab 2</button></div>
//in default it should show the tab 3 content only and When i Press this button on above Div it should be moved to next tab and the class name will be transfer to the tab 1 on <li>
</div>
);
}

Answer 1

You can save on the state of the component the activeIndex id, and render conditionally the className.
class Demo extends React.Component {
state = {
activeIdx: 0
};
render() {
return (
<div>
<ul>
<li><a href="#tab-menu-1" className={this.state.activeIdx === 0 ? 'active' : ''} data-index={0} onClick={this.handleChange}>Tab 1</a>
</li>
<li><a href="#tab-menu-2" className={this.state.activeIdx === 1 ? 'active' : ''} data-index={0} onClick={this.handleChange}>Tab 2</a></li>
<li><a href="#tab-menu-3" className={this.state.activeIdx === 2 ? 'active' : ''} data-index={0} onClick={this.handleChange}>Tab 3</a></li>
</ul>
<div id="tab-menu-1">Tab 1 Content <button>Move to Tab 2</button></div>
<div id="tab-menu-2">Tab 2 Content <button>Move to Tab 2</button></div>
<div id="tab-menu-3">Tab 3 Content <button>Move to Tab 2</button></div>
</div>
);
}
handleChange = (evnt) => {
this.setState({activeIdx: evnt.target.data.index});
}
}
A better approach would be to generate the list of items out of an array.
class Demo extends React.Component {
state = {
activeIdx: 0,
list: ["content 1", "content 2", "content 3"]
};
render() {
return (
<div>
<ul>
{this.state.list.map((item, index) => (
<li key={item}>
<a
href={`#tab-menu-${index + 1}`}
className={this.state.activeIdx === index && "active"}
data-index={index}
onClick={this.handleChange}
>
Tab {index + 1}
</a>
</li>
))}
</ul>
{this.state.list.map((item, index) => (
<div id={`tab-menu-${index + 1}`} key={item}>
{item}
<button>Move to Tab {index + 2}</button>
</div>
))}
</div>
);
}
handleChange = evnt => {
this.setState({ activeIdx: evnt.target.data.index });
};
}