react change class name on state change
Below is a fully functional example of what I believe you're trying to do (with a functional snippet).
Explanation
Based on your question, you seem to be modifying 1 property in state for all of your elements. That's why when you click on one, all of them are being changed.
In particular, notice that the state tracks an index of which element is active. When MyClickable is clicked, it tells the Container its index, Container updates the state, and subsequently the isActive property of the appropriate MyClickables.
Example
class Container extends React.Component {
state = {
activeIndex: null
}
handleClick = (index) => this.setState({ activeIndex: index })
render() {
return <div>
<MyClickable name="a" index={0} isActive={ this.state.activeIndex===0 } onClick={ this.handleClick } />
<MyClickable name="b" index={1} isActive={ this.state.activeIndex===1 } onClick={ this.handleClick }/>
<MyClickable name="c" index={2} isActive={ this.state.activeIndex===2 } onClick={ this.handleClick }/>
</div>
}
}
class MyClickable extends React.Component {
handleClick = () => this.props.onClick(this.props.index)
render() {
return <button
type='button'
className={
this.props.isActive ? 'active' : 'album'
}
onClick={ this.handleClick }
>
<span>{ this.props.name }</span>
</button>
}
}
ReactDOM.render(<Container />, document.getElementById('app'))button {
display: block;
margin-bottom: 1em;
}
.album>span:after {
content: ' (an album)';
}
.active {
font-weight: bold;
}
.active>span:after {
content: ' ACTIVE';
}<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="app"></div>Update: "Loops"
In response to a comment about a "loop" version, I believe the question is about rendering an array of MyClickable elements. We won't use a loop, but map, which is typical in React + JSX. The following should give you the same result as above, but it works with an array of elements.
// New render method for `Container`
render() {
const clickables = [
{ name: "a" },
{ name: "b" },
{ name: "c" },
]
return <div>
{ clickables.map(function(clickable, i) {
return <MyClickable key={ clickable.name }
name={ clickable.name }
index={ i }
isActive={ this.state.activeIndex === i }
onClick={ this.handleClick }
/>
} )
}
</div>
}