React Onclick Add Class to Clicked Element But Remove from the Others

React onClick add class to clicked element but remove from the others

You can set active index on click:

// State
this.state = {
  activeIndex: null
};
// event
onElementClicked(e) {
  this.setState({ activeIndex: e.target.index })
}
// class to use
className={this.index === this.state.activeIndex ? 'big-size' : ''}

ReactJS onclick add or remove class to another element

1. Use the state that keeps the track of whether to show the nav or not.
2. Use a class name in the react code that corresponds to the state.
3. React uses "className" instead of "class" since "class" is already a reserved word in javascript.

You could check this sandbox link for implementation

function App() {
  const [show, setShow] = React.useState();

  return (
    <div className="App">
      <button className="add" onClick={() => setShow(true)}>
        Add
      </button>
      <button className="remove" onClick={() => setShow(false)}>
        Remove
      </button>
      <button className="toggle" onClick={() => setShow(!show)}>
        Toggle
      </button>
      <nav className={show ? "show" : ""}>Navigation menu</nav>
    </div>
  );
}

Add a className onClick while removing other class with the same name from siblings

Here I have created working demo for you

https://stackblitz.com/edit/react-ertozp

You can manage it by using state variable. You have to handle the click event of li tag and set index on click of it.

import React, { useState } from 'react';

...
...

function App(props) {
    const [active, setActive] = useState(1)
    const list = ['list1', 'list2', 'list3']
    const menuitems = list.map((list, index) => {
        return <li className={`menuitem${active === index ? ' active' :''}`} key={index} onClick={()=>setActive(index)}>{list}</li>
    })

    return (
        <ul>{menuitems}</ul>
    )
}

click an image and add class to it but when selectin other one remove the class

You should have a state that holder an identifier of this specific selected image. For example:

const [selectedPath,setSelectedPath]=useState('');

Than, in the map you can add a condition with this state, and use the className where you need.

 {imagenesProductos.map((img) => {
                  if (img) {
                    console.log(img);
                    return (
                      <SwiperSlide className="">
                        <Image onClick={clickedImage} className=`product ${img===selectedPath?"selected":""}` src={img} width={100} height={100} alt='productImage' />
                      </SwiperSlide>
                    )
                  }
  })}

And the clickImage function should be:

 const clickedImage = (e) => {
    console.log(e.target.src);
    setSelectedPath(e.target.src);
  }
           

How to dynamically add and remove class on click with React?

You must avoid touching the DOM by yourself, let's React do it for you.

You want to keep a signal in the state that tell's you whether an element in the list is active or not, and use that signal to set a class or not in your rendering phase:

state = {
  activeId: null  // nothing selected by default, but this is up to you...
}

handleClick(event, id) {
  this.setState({ activeId: id })
}

render() {
  <ul className="menu-list">
  {
    this.props.getList.map(list =>
      <Link key={ list.id }
            className={ this.state.activeId === list.id && 'is-active' }
            onClick={ this.handleClick.bind(this, list.id) } 
            to="">
        { list.title }
      </Link>                    
    )
  }
  </ul>
}

This way, at each render, the id of each item in your getList prop is compared to the one you keep in your state, then:

1. if it's the active id, it assign the 'is-active' class;
2. if it's not the active one, it clears the previous className (in case it was 'is-active';

Hope it helps :)

How to add or remove a className on event in ReactJS?

The list of classes can be derive from the state of the component. For example:

var Component = React.createClass({
  getInitialState: function() {
    return {
      clicked: false
    };
  },

  handleClick: function() {
    this.setState({clicked: true});
  },

  render: function() {
    var className = this.state.clicked ? 'click-state' : 'base-state';
    return <div className={className} onClick={this.handleClick}>click here</div>;
  }
});

Calling this.setState will trigger a rerender of the component.

Add and remove class on react buttons

https://codesandbox.io/s/naughty-allen-vrj3r

Here, I edited your codesandbox.
Basically what I store in the state is a key that identifies the active button. It's null by default since that's what you wanted.

I assigned integers to each button but that can be whatever you want. You could also keep the integers, and add your buttons via a .map() to have a dynamic number of buttons for examples (see Constantin's answer).

---

Related Topics