how to toggle with react hooks

Question

I have 2 buttons that can be toggled by that simple hook:

  const [extendDetails, setExtendDetails] = useState(false);
  const handleExtendDetails = () => setExtendDetails(!extendDetails);

  const [extendPictures, setExtendPictures] = useState(false);
  const handleExtendPictures = () => setExtendPictures(!extendPictures);

And these are the buttons:

<button onClick={handleExtendDetails}>Extend Details</button>
<button onClick={handleExtendPictures}>Extend Pictures</button>

Is there some sort of way to name the buttons and use e or some kind of a variable so I won't need to declare a hook for each button in case I've got 20 buttons and not just 2?

Could you put the button in a component? Then you can re-use it over and over again. — Evert
– Evert, Commented Jan 17, 2021 at 16:44

Naren · Accepted Answer · 2021-01-18 04:41:36Z

1

You can try using defining simple Object and target name combination.

const initialState = () => ({
  extendDetails: false,
  extendPictures: false
})

export default function App() {
  const [toggle, setToggle] = useState(initialState())

  const handleToggle = (e) => {
    const { name } = e.target

    setToggle({ ...toggle, [name]: !toggle[name] })
  }
  return (
    <div>
      <button name="extendDetails" onClick={handleToggle}>{toggle.extendDetails ? 'Open' : 'Close' } Extend Details</button>
      <button name="extendPictures" onClick={handleToggle}>{toggle.extendPictures ? 'Open' : 'Close' } Extend Pictures</button>
    </div>
  );
}

Demo link is here

answered Jan 18, 2021 at 4:41

Naren

4,5293 gold badges20 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

CertainPerformance · Accepted Answer · 2021-01-18 04:24:36Z

1

One option is to use an array instead:

const [toggledButtons, setToggledButtons] = useState(() => Array.from(
  { length: 20 },
  () => false
));

Then you could do something like

const toggle = (i: number) => () => setToggledButtons(
    toggledButtons.map((current, j) => i === j ? !current : current)
);

<button onClick={toggle(0)}>Extend Details</button>
<button onClick={toggle(1)}>Extend Pictures</button>

edited Jan 18, 2021 at 4:24

answered Jan 17, 2021 at 16:47

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

4 Comments

Commando Over a year ago

Seems like toggledButtons is declared but not used. Got this error: Type '() => [boolean[], Dispatch<SetStateAction<boolean[]>>]' is not an array type.

CertainPerformance Over a year ago

It's not shown in your original code where extendDetails and extendPictures are being used. Replace uses of those variables with toggledButtons[0], toggledButtons[1], etc. You could even use an object instead of an array if you think it'd make things clearer.

Commando Over a year ago

I understand, it looks like a good solution. The only issue now is that I use React with TypeScript (tsx file) and I get the only error message: Argument of type '(current: any, j: any) => any' is not assignable to parameter of type 'SetStateAction<boolean[]>'. Type '(current: any, j: any) => any' is not assignable to type '(prevState: boolean[]) => boolean[]'.

CertainPerformance Over a year ago

If you're using TS, you need to indicate the type of the argument. Since toggle takes a number argument, type the argument as that, a number: i: number

Collectives™ on Stack Overflow

how to toggle with react hooks

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related