How to toggle 'className' dynamically in react.js?

Question

I want to set the active class dynamically in react.js but it's not working! I'm using the setState() method to change the selected item.

this line of code not work . className={selectedCategoryId === item.id ? 'active' : ''}

I think the setState() function does not work correctly...

const {open, selectedProduct, productCategory, filteredProducts, selectedCategoryId} = this.state;
const categoryItems = productCategory.map((item) =>
    <a key={item.id}
       onClick={() => this.handleFilter(item.id)}
       className={selectedCategoryId === item.id ? 'active' : ''}
       // className={()=>this.isActive(item.id)}
       className="pointer"
    >{item.value}</a>
);

this does not change the class:

handleFilter = (id) => {
    const filteredItem = this.state.productList.filter(x => x.categoryId == id);
    this.setState({filteredProducts: filteredItem, selectedCategoryId: id});  
}

but this change the className correctly when select I all tags:

handleRemoveFilter = () => {
    this.setState({filteredProducts: this.state.productList, selectedCategoryId: 0});
}
//-------------------------------
<div className="tag-list">
    <a  onClick={this.handleRemoveFilter}
        className="pointer"
        className={ this.state.selectedCategoryId === 0 ? 'active' : ''}
    >All tags</a>
    {categoryItems}
</div>

Hi, I want to help but I didn't really understand the problem. Please try to be clear about what you EXPECT to happen and what IS happening. — Sagi Rika
– Sagi Rika, Commented Mar 26, 2019 at 8:03
please put here relevant code frok and show us link(it will be easier to help you):stackblitz.com/edit/react-pzyyha — לבני מלכה
– לבני מלכה, Commented Mar 26, 2019 at 8:06

Ibra · Accepted Answer · 2019-03-26 08:12:56Z

2

If setState() works well, try this :

<a onClick={this.handleRemoveFilter}
        className={ this.state.selectedCategoryId === 0 ? 'pointer active' : 'pointer'}
>All tags</a>

answered Mar 26, 2019 at 8:12

Ibra

1,0741 gold badge8 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tony Yip · Accepted Answer · 2019-03-26 08:11:34Z

1

One of the most common ways is to use classnames which you can conditionally joining classNames together

var classNames = require('classnames');

class Button extends React.Component {
  // ...
  render () {
    var btnClass = classNames({
      btn: true,
      'btn-pressed': this.state.isPressed,
      'btn-over': !this.state.isPressed && this.state.isHovered
    });
    return <button className={btnClass}>{this.props.label}</button>;
  }
}

answered Mar 26, 2019 at 8:11

Tony Yip

7505 silver badges14 bronze badges

2 Comments

Hamed Rahmani Over a year ago

i wanna set className dynamically but className={selectedCategoryId === item.id ? 'active' : ''} not work .

Tony Yip Over a year ago

The correct way to write is className={classNames({active: selectedCategoryId === item.id})}

Sujith Sandeep · Accepted Answer · 2022-06-18 02:25:18Z

1

We can toggle class name dynamically like below,

const [islight, setIslight] = useState(false)
const toggle = () => {
    setIslight(!islight)
}

return (
   <div className={`block ${islight ? "blocklight" : "blockdark"}`}>
      <h2>Hello World</h2>
   </div>
)

answered Jun 18, 2022 at 2:25

Sujith Sandeep

1,24710 silver badges21 bronze badges

Comments

Gaurav Mithas · Accepted Answer · 2019-03-26 08:08:50Z

0

store classname in state along with selected item. You can just update the classname in state whenever required.

for eg,

  <a key={item.id}
            onClick={() => this.handleFilter(item.id)}
            className={this.state.activeClassName}

where active classname can be updated inside handlefilter

answered Mar 26, 2019 at 8:08

Gaurav Mithas

752 silver badges8 bronze badges

Collectives™ on Stack Overflow

How to toggle 'className' dynamically in react.js?

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related