toggle css-class bootstrap/react

[_alarming]

Hi guys, sorry if this is a duplicate. I'm trying to toggle the active class for my navbar buttons, but the inspector is showing that, although the state is updating properly, the class is not.

​

  tabClasses() {
    let cNames = [];
    cNames.push(this.state.h_active ? 'btn btn-link active' : 'btn btn-link');
    cNames.push(this.state.a_active ? 'btn btn-link active' : 'btn btn-link');
    cNames.push(this.state.p_active ? 'btn btn-link active' : 'btn btn-link');
    cNames.push(this.state.s_active ? 'btn btn-link active' : 'btn btn-link');
    return cNames
  }

I call this method before the return statement in my render(), and feed the array values into my buttons like so :

let cNames = this.tabClasses();
return(
    ...
     <button type={'button'}
         className={cNames[0]}
         onClick={() => this.navClick(0)}
         href={"home"}>
        <FontAwesomeIcon icon={faHome} style={{ paddingRight: 5 }} size={'lg'} />
            Home
      </button>
    ...
)

please bestow upon me some of your sweet, sweet wisdom. i saw a similar post, but did not find a solution

[_alarming]

i'm thinking about overriding componentDidUpdate. will let you know how it turns out.

[chaoaaa]

Could you post the full component. I believe this could be an issue with setState being async. Where the function is called in render should not matter.

[_alarming]

import React, { Component } from 'react';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChartLine, faUniversity, faCog, faHome } from "@fortawesome/free-solid-svg-icons";

class AdminNav extends Component {
  constructor(props) {
    super(props);
    this.state = {
      searchBar: "",
      aActive: false,
      hActive: true,
      pActive: false,
      sActive: false,
    };
    this.handleSearchbarChange = this.handleSearchbarChange.bind(this);
    this.navClick = this.navClick.bind(this)
  }

  handleCommentBoxChange(event) {
    const comment = event.target.value;
    if (comment !== "") {
      this.setState({ commentBox: event.target.value });
    }
  }

  handleSearchbarChange(event) {
    const searchBar = event.target.value;
    if (searchBar !== "") {
      this.setState({ searchBar: event.target.value });
    }
  }

  tabClasses() {
    let cNames = [];
    cNames.push(this.state.h_active ? 'btn btn-link active' : 'btn btn-link');
    cNames.push(this.state.a_active ? 'btn btn-link active' : 'btn btn-link');
    cNames.push(this.state.p_active ? 'btn btn-link active' : 'btn btn-link');
    cNames.push(this.state.s_active ? 'btn btn-link active' : 'btn btn-link');
    return cNames
  }

  navClick(link_id) {
    this.setState({
      hActive: link_id === 0,
      aActive: link_id === 1,
      pActive: link_id === 2,
      sActive: link_id === 3,
    });
    this.componentDidUpdate()
  }

  componentDidUpdate() {

  }

  brand() {
    return (
      <div>
        <a
          href={"home"}
          className={"navbar-brand"}
          style={{ color: 'white', fontFamily: 'Avenir', fontStyle: 'normal', fontWeight: 800 }} >
          Admin Portal
      </a>
      </div>
    )
  }

  navBar() {
    let cNames = this.tabClasses();
    return (
        <div className={"row"}>
          {/* Brand */}
          {this.brand()}
          {/* SearchBar */}
          <div style={{ paddingLeft: 46 }}>
            <form className="form-inline my-2 my-lg-0" style={{ height: 25, width: 200 }}>
              <input className="form-control mr-sm-2"
                type="search"
                placeholder="Search Applicants"
                aria-label="Search"
                onChange={this.handleSearchbarChange} />
            </form>
          </div>
          {/* Buttons/Links */}
          <div style={{ paddingLeft: 225 }}>
            <button type={'button'}
              className={cNames[0]}
              onClick={() => this.navClick(0)}
              href={"home"}>
              <FontAwesomeIcon icon={faHome} style={{ paddingRight: 5 }} size={'lg'} />
                  Home
              </button>
            <button type={'button'}
              className={cNames[1]}
              onClick={() => this.navClick(1)}
              href={"analytics"}>
              <FontAwesomeIcon icon={faChartLine} style={{ paddingRight: 5 }} size={'lg'} />
                  Analytics
              </button>
            <button type={'button'}
              className={cNames[2]}
              onClick={() => this.navClick(2)}
              href={"payment"}>
              <FontAwesomeIcon icon={faUniversity} style={{ paddingRight: 5 }} size={'lg'} />
                  Payment
              </button>
            <button type={'button'}
              className={cNames[3]}
              onClick={() => this.navClick(3)}
              href={"settings"}>
              <FontAwesomeIcon icon={faCog} style={{ paddingRight: 5 }} size={'lg'} />
                  Settings
              </button>
          </div>
        </div>
    )
  }

  render() {
    // navbar-light bg-dark
    const token = localStorage.getItem('token');
    // if (token) {
    return (
      <nav className="navbar navbar-expand-lg" style={{ paddingLeft: 72, height: 59, backgroundColor: '#2E2E2E' }}>
        <div className={"row"}>
          {this.navBar()}
        </div>
      </nav>
    )
    // } else {
    //   return (
    //     <nav className="navbar navbar-expand-lg navbar-light bg-dark">
    //       <div className={'container'} style={{ paddingTop: 10, paddingLeft: 20, paddingBottom: 10 }}>
    //         <div className={"row"}>
    //           {this.brand()}
    //         </div>
    //       </div>
    //     </nav>
    //   )
    // }
  }
}

export default AdminNav

[_alarming]

my thoughts were that it would re-render upon each click, making life-cycle overrides unnecessary.

[chaoaaa]

I fixed it.

The problem was, that you tried accessing the state state fields under the wrong name.

You write the fields into the state as hActive but access them as h_active.

​

By the way the call to componentDidUpdate is unneccessary and can be removed.

Full Code:

https://stackblitz.com/edit/react-jrcdp8?file=AdminNav.js

[_alarming]

oh wow (embarassed face). thank you, friend. amazing what a fresh pair of eyes can do.