Set class dynamically using classNames module not working

Question

thanks in advance for taking a look at this. I am attempting to set the class on page load of my element to pending, and then onClick, remove the pending class and add the completed class:

Currently, the state of completed and pending change accordingly; however, the classes do not change (pending is still active class and completed is not active). Any help would be greatly appreciated!

import React, { Component } from 'react';
import classNames from 'classnames';
import '../stylesheets/Task.css';

class Task extends Component {
  constructor(props) {
    super(props);

    this.state = {
      completed: false,
      pending: true
    }

    this.makeComplete = this.makeComplete.bind(this);
  }

  makeComplete() {
    if (this.state.pending) {
      this.setState({
        completed: true,
        pending: false
      }, () => {
        console.log('completed: ' + this.state.completed, '\npending: ' + this.state.pending);
      });
    }
  }

  render() {
    return (
      <div className="task">
        <div className="check-task-container" onClick={this.makeComplete} >
          <i className={classNames({
            completed: this.state.completed,
            pending: this.state.pending,
            far: true,
            'fa-circle': true
        })} ></i>
        </div>
        {this.props.title}
      </div>
    );
  }
}

Just wanted to clarify: the state of completed and pending are changing as intended; however, the classes don't change on the i element. — sivs, Mar 05 '18 at 22:45

Jayavel · Answer 1 · 2018-03-05T05:54:53.750

0

If I understood correctly, you need to change className on Event onClick.

if so, Change your setState in makeComplete like below:

this.setState({
        completed: !this.state.completed,
        pending: !this.state.pending
      });

or

this.setState((prevState) => {
  return {completed: !prevState.completed, pending: !prevState.pending};
});

complete code in working demo

edited Mar 05 '18 at 05:54

answered Mar 05 '18 at 05:44

Jayavel

3,377
2
21
35

Thanks Jayavel - I do appreciate the demo; however, it does not seem to work. My state changes; however, the classes do not change on the i elements. – sivs Mar 05 '18 at 22:38

score 0 · Accepted Answer · answered Mar 08 '18 at 02:08

This issue was really related to the fontawesome conversion of the i element to an svg as React was unaware of the change in the element when rendering. To solve the issue, I had to use the fontawesome node module (https://www.npmjs.com/package/@fortawesome/react-fontawesome) instead of using the fontawesome CDN.

Set class dynamically using classNames module not working

2 Answers2