React
HTML
<div id="app"></div>
CSS
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
button.active {
color: white;
background: black;
}
React
class TodoApp extends React.Component {
state = { ids: [0,1,2,3,4], active: 0 }
setActive = id => { this.setState({ active: id }) }
render() {
return (
<div>
{
this.state.ids.map(id => (
<button
key={id}
onClick={() => this.setActive(id)}
className={`${this.state.active === id ? "active" : ''}`}
>
{id}
</button>
))
}
</div>
)
}
}
ReactDOM.render(<TodoApp />, document.querySelector("#app"))