const links = ['link1', 'link2', 'link3'];
const [active, setActive] = useState(null);
<ul>
{links.map((link) => (
<li className="nav-item">
<a
href={`#${link}`}
className={`nav-link ${active == link && 'm-active'}`}
onClick={() => setActive(link)}
>{link}</a>
</li>
))}
</ul>
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
animate: false;
}
this.handleClick = this.handleClick.bind(this);
}
handleClick(e) {
// modify the state, this will automatically recall render() below.
this.setState((prevState) => {
return { animate: !prevState.animate }
});
}
render() {
let animationClasses = (this.state.animate ? ' active': '');
return (
<div>
<div className={`vote_card_hover${animationClasses}`}>
<a>Test</a>
</div>
<div>
<Button title="Toggle Animation" onClick={this.handleClick} />
</div>
</div>
)
}
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
animate: false;
}
this.handleClick = this.handleClick.bind(this);
}
handleClick(e) {
// modify the state, this will automatically recall render() below.
this.setState((prevState) => {
return { animate: !prevState.animate }
});
}
render() {
let animationClasses = (this.state.animate ? ' active': '');
return (
<div>
<div className={`vote_card_hover${animationClasses}`}>
<a>Test</a>
</div>
<div>
<Button title="Toggle Animation" onClick={this.handleClick} />
</div>
</div>
)
}
}