Breaking News: Grepper is joining You.com. Read the official announcement!

add active class to li onclick react

bilalahmed_dev answered on October 19, 2021 Popularity 9/10 Helpfulness 6/10

answer add active class to li onclick react

related add active class to button onclick react

add active class to li onclick react

Comment

const links = ['link1', 'link2', 'link3'];
const [active, setActive] = useState(null);

<ul>
  {links.map((link) => (
    <li className="nav-item">
      <a 
        href={`#${link}`} 
        className={`nav-link ${active == link && 'm-active'}`}
        onClick={() => setActive(link)}
      >{link}</a>
    </li>
  ))}
</ul>

Popularity 9/10 Helpfulness 6/10 Language javascript

Source: stackoverflow.com

Tags: add class javascript onclick

Link to this answer
Share Copy Link

Contributed on Apr 23 2022

bilalahmed_dev

0 Answers Avg Quality 2/10

Closely Related Answers

add active class to button onclick react

Comment

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      animate: false;
    }

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

  handleClick(e) {
    // modify the state, this will automatically recall render() below.
    this.setState((prevState) => {
      return { animate: !prevState.animate }
    });
  }

  render() {
    let animationClasses = (this.state.animate ? ' active': '');

    return (
      <div>
        <div className={`vote_card_hover${animationClasses}`}>
          <a>Test</a>
        </div>

        <div>
          <Button title="Toggle Animation" onClick={this.handleClick} />
        </div>
      </div>
    )
  }
}

Popularity 9/10 Helpfulness 2/10 Language javascript

Source: w3programmers.org

Tags: add

Link to this answer
Share Copy Link

Contributed on Mar 27 2022

Frantic Falcon

0 Answers Avg Quality 2/10

add active class to button onclick react

Comment

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      animate: false;
    }

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

  handleClick(e) {
    // modify the state, this will automatically recall render() below.
    this.setState((prevState) => {
      return { animate: !prevState.animate }
    });
  }

  render() {
    let animationClasses = (this.state.animate ? ' active': '');

    return (
      <div>
        <div className={`vote_card_hover${animationClasses}`}>
          <a>Test</a>
        </div>

        <div>
          <Button title="Toggle Animation" onClick={this.handleClick} />
        </div>
      </div>
    )
  }
}

Popularity 9/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: add

Link to this answer
Share Copy Link

Contributed on Oct 19 2021

elcharitas

0 Answers Avg Quality 2/10

add active class to li onclick react

Contents

More Related Answers

add active class to li onclick react

Closely Related Answers

add active class to button onclick react

add active class to button onclick react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.