Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

react change class name on state change

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?

like image 820
gamer Avatar asked Feb 05 '16 12:02

gamer


People also ask

How do you dynamically change className in React?

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.

How do you manipulate a className in React?

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.


Video Answer


1 Answers

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> } 
like image 176
Jon Surrell Avatar answered Sep 20 '22 08:09

Jon Surrell