React - Toggle Class Onclick

ReactJS onclick toggle class event multiple times

You should create a component for your button that contains the useState.
Else, the useState is global for all the components that use it.

Example:
https://codesandbox.io/s/withered-feather-vj8owx?file=/src/App.js

const MyButtonComponent = ({myText}) => {
  const [isActive, setActive] = React.useState(false);

  return (
    <button
      onClick={() => setActive(!isActive)}
      className={`toggle ${isActive ? "active" : ""}`}
    >
      {myText}
    </button>
  );
};

export default function App() {
  return (
    <>
      <MyButtonComponent myText="Something" />
      <MyButtonComponent myText="Something else"/>
      <MyButtonComponent myText="Else something"/>
    </>
  );
}

How to toggle class to each li element in React.js?

It looks like you have 1 variable, show, to keep track of the state for N number of <li>'s. Do you see the issue?

If each <li> needs to have its own state, that could be a good sign you need to create a new component, perhaps <ListItem />? This way, each <ListItem /> will have its own useState hook to handle the state changes.

function About() {
  return (
    <ul className="list">
      <ListItem />
      <ListItem />
    </ul>
  );
}

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

  return (
    <li className={`list-item ${show ? "on" : ""}`}>
      <button onClick={() => setShow(prev => !prev)}>Toggle</button>
    </li>
  );
}

REACT: toggle class onClick, and call other function

the problem is that you are sharing the same state for both buttons, so when you change it for one, it changes for the other. You should wrap your buttons in different components so that they have different state.

If you need a callback in the parent component to be called, pass it to the button components so that they can trigger that as well.

The button could look like this:

class Button extends React.Component {
  constructor () {
    super()
    this.state = { isButtonActive: false }
    this.onClick = this.onClick.bind(this)      
  }

  onClick () {
    this.setState({
      isButtonActive: !this.state.isButtonActive
    })

    this.props.openPanel(this.props.buttonNumber)
  }

  render () {

    return (
      <button onClick={this.onClick()} className={this.state.isButtonActive ? 'active' : null}>button text</a>
    )
  }
}

how the parent component could look like:

class Parent extends React.Component {
  onButtonClicked (number) {
    console.log(`Button ${number} was clicked`)
  }

  render () {
    return (
      <div>
        <Button buttonNumber={1} openPanel={this.onButtonClicked} />
        <Button buttonNumber={2} openPanel={this.onButtonClicked} />
      </div>
    )
  }

React toggle class on click. Mapping list items

You are giving the class Done whenever isActive is set to true, to each of your list item.
Maybe try to initialize isActive like this:

const [isActive, setActive] = useState(null);
const toggle = (i) => {
  setActive(i);
};

and then give the Done class this way:

<li className={isActive === i ? 'Done': ""} key={i} onClick={() => toggle(i)}>{item}</li>

You can also store all of the active index in an array by initializing isActive this way:

const [isActive, setActive] = useState([]);

and then write your hook :

const toggle = (i) => {
  if (isActive.indexOf(i) === -1) {
    setActive([...isActive, i]);
  }
};

then you can do the following in order to give the class to all of the divs you clicked.

<li className={isActive.indexOf(i) !== -1 ? 'Done': ""} key={i} onClick={() => toggle(i)}>{item}</li>

---

Related Topics