Problem with using different onClick events in one button component

Question

I wanted to make my components as reusable as it possible but when I started adding events the problems occured. I am using one button component in a lot of places in my app and I just change its name. It worked fine when I passed one onClick event to it (to change menu button name) but when I wanted to do the same with another button (to change cycle name) and when I passed second onClick event to the same button component the menu button stopped working. I tried to find solution but found only different topics. I know I could make a wrapper around the button and make onClick on the wrapper, but I think I am doing something wrong and there must be more elegant way to handle this.

Button component

export const Button = ({text, changeButtonName, changeCycle}) => {

  return (
    <AppButton onClick={changeButtonName, changeCycle}>
      {text}
    </AppButton>
  );
};

Navbar component where cycle and menuu buttons are placed

export const Navbar = () => {

  const menuButton = 'Menu';
  const closeButton = 'Zamknij';

  const [menuButtonName, setMenuButtonName] = useState(menuButton);

  const changeButtonName = () => {
    menuButtonName === menuButton ? setMenuButtonName(closeButton) : setMenuButtonName(menuButton);
  }

  const interiorButton = 'Interior →';
  const structuralCollageButton = 'Structural Collage →';

  const [cycleButtonName, setCycleButtonName] = useState(interiorButton);

  const changeCycle = () => {
    cycleButtonName === interiorButton ? setCycleButtonName(structuralCollageButton) : setCycleButtonName(interiorButton);
  }

  return (
    <Nav>
      <AuthorWrapper>
        <AuthorName>
          Michał Król
        </AuthorName>
        <AuthorPseudonym>
          Structuralist
        </AuthorPseudonym>
      </AuthorWrapper>
      <CycleButtonWrapper >
        <Button text={cycleButtonName} changeCycle={changeCycle} />
      </CycleButtonWrapper>
      <MenuButtonWrapper>
        <Button text={menuButtonName} changeButtonName={changeButtonName} />
      </MenuButtonWrapper>
    </Nav>
   )
}

Rafael Buzatto de Campos · Accepted Answer · 2021-03-10 20:42:12Z

2

this is not a really reusable approach for a Button. For every new method name you would have to include in the props params and you could face something like:

export const Button = ({text, changeButtonName, changeCycle, changeTheme, changeDisplay})

the proper way to make it reusable would be by passing only one handler to your button:

export const Button = ({text, clickHandler}) => {

  return (
    <AppButton onClick={clickHandler}>
      {text}
    </AppButton>
  );
};

fwiw, the reason you have problem is because at this code onClick={changeButtonName, changeCycle} you are passing multiple expressions with comma operator where the last operand is returned.

answered Mar 10, 2021 at 20:42

Rafael Buzatto de Campos

10.5k6 gold badges29 silver badges36 bronze badges

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

1 Comment

Paweł Over a year ago

Yup, that's exactly what I've been looking for! I pasted your code and changed props in buttons to clickHandler={changeCycle} and clickHandler={changeButtonName} and it works just fine. Easy thing but I had complete mind block. Thanks a lot.

Shubhaw Kumar · Accepted Answer · 2021-03-10 20:27:42Z

0

You cannot pass two functions to onClick. Either do a conditional check that call that function which is passed or make a wrapper function.

export const Button = ({text, changeButtonName, changeCycle}) => {

  return (
    <AppButton onClick={changeButtonName || changeCycle}>
      {text}
    </AppButton>
  );
};

or

export const Button = ({text, changeButtonName, changeCycle}) => {

  return (
    <AppButton
        onClick={() => {
          changeButtonName && changeButtonName();
          changeCycle && changeCycle();
        }
    }>
      {text}
    </AppButton>
  );
};

answered Mar 10, 2021 at 20:27

Shubhaw Kumar

7214 silver badges19 bronze badges

Comments

Arfan ali · Accepted Answer · 2021-03-10 20:28:22Z

0

update your code like

<AppButton onClick={()=> {
  changeButtonName && changeButtonName();
  changeCycle && changeCycle();
 }}>
  {text}
</AppButton>

edited Mar 10, 2021 at 20:28

answered Mar 10, 2021 at 20:10

Arfan ali

4392 silver badges5 bronze badges

2 Comments

Paweł Over a year ago

Didn't help.TypeError: changeButtonName is not a functionon.

Arfan ali Over a year ago

got it.. you are sending it one button but not is another

Collectives™ on Stack Overflow

Problem with using different onClick events in one button component

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related