I have a state like this where I am setting active
and class
flag like this:
constructor(props) { super(props); this.state = {'active': false, 'class': 'album'}; } handleClick(id) { if(this.state.active){ this.setState({'active': false,'class': 'album'}) }else{ this.setState({'active': true,'class': 'active'}) } }
And I have a list of items with class name from state:
<div className={this.state.class} key={data.id} onClick={this.handleClick.bind(this.data.id}> <p>{data.name}</p> </div>
Here how can I change the class name of particular div?
Use Native JavaScript to Set Dynamic className Values in React. The simplest way to add dynamic className values is to combine curly braces and set the className attributes equal to the state variables. This is a fairly simple feature available in all versions of JavaScript.
Class Name Manipulation Edit on GitHubclassSet() is a neat utility for easily manipulating the DOM class string. When using classSet() , pass an object with keys of the CSS class names you might or might not need. Truthy values will result in the key being a part of the resulting string.
Below is a fully functional example of what I believe you're trying to do (with a functional snippet).
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 MyClickable
s.
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>
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> }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With