There are two buttons and you need to change them alternately-CodePudding

I have two buttons. I can change its color by clicking on one button. And when you click on another button, change its color as well, and return the old color to the first button. Something like toggle. How can I implement such functionality in a react applicatio.

const [toggle, setToggle] = useState(false);
  const toggleIt = () => {
    setToggle(!toggle);
  };

  return (
    <div>
      <button onClick={toggleIt}>Button1</button>
      <button onClick={toggleIt}>Button2</button>
)

CodePudding user response：

somthing like this (codesandbox),

import classNames from "classnames";
import { useCallback, useState } from "react";
import "./styles.css";

export default function App() {
  const [toggle, setToggle] = useState(false);
  const toggleIt = useCallback(() => {
    setToggle((toggle) => !toggle);
  }, []);

  return (
    <div>
      <button
        onClick={toggleIt}
        className={classNames({
          "btn-act": toggle
        })}
      >
        Btn A
      </button>
      <button
        onClick={toggleIt}
        className={classNames({
          "btn-act": !toggle
        })}
      >
        Btn B
      </button>
    </div>
  );
}

CodePudding user response：

    const [toggle, setToggle] = useState(false);
    const toggleIt = () => {
       setToggle(!toggle);
    };
    
    return ( 
       <div>
           <button onClick={toggleIt} style={toggle ? {color: "blue"} : {color: "red"}}</button>
           <button onClick={toggleIt} style={toggle ? {color: "pink"} : {color: "purple"}}</button>
       </div>
    )

CodePudding user response：

Background

You can use the useEffect() hook to accomplish this feature depending on the button pressed. Just hold two states and flip them each time a different button is pressed, and with those two states you can use two separate functions to handle the onClick()'s.

The useEffect() hook automatically re-renders the component once any of the items in the dependency array at the end change, which will happen depending on the button pressed.

You can also directly set true/false values on your state variables with the second value that returns from useState(), and those state variables will automatically have their states updated without you manually assigning them.

There is very likely a better, more efficient way of doing it, but this is just a general guideline, if you will.

This is the code

const [toggleOne, setToggleOne] = useState(false);
const [toggleTwo, setToggleTwo] = useState(true);

const toggleFirst = () => {
  setToggleOne(true);
  setToggleTwo(false);
};

const toggleSecond = () => {
  setToggleOne(false);
  setToggleTwo(true);
};

useEffect(() => {
  if (toggleOne) {
    // Do something with first button pressed
  } else if (toggleTwo) {
    // Do something with second button pressed
  }
}, [toggleOne, toggleTwo]);

return (
  <div>
    <button onClick={toggleFirst}>Button1</button>
    <button onClick={toggleSecond}>Button2</button>
  </div>
);