Increment and Decrement button via Material UI ButtonGroup

Question

I want to create a increment / decrement button with material ui ButtonGroup. the button is like this image at first.

The first part of ButtonGroup

When user clicked on the button, the second part of ButtonGroup will show (Like Image Below).

Second part of the ButtonGroup

how can I achieve this? Please Help.

thanks in advance.

Code

import React from "react";
import Grid from "@material-ui/core/Grid";
import Button from "@material-ui/core/Button";
import ButtonGroup from "@material-ui/core/ButtonGroup";

class GroupedButtons extends React.Component {
  state = { counter: 0 };

  handleIncrement = () => {
    this.setState(state => ({ counter: state.counter + 1 }));
  };

  handleDecrement = () => {
    this.setState(state => ({ counter: state.counter - 1 }));
  };
  render() {
    const Btn = (
     <>
      <Button disabled>{this.state.counter}</Button>
      <Button onClick={this.handleDecrement}>-</Button>
     </>
    );

    return (
      <ButtonGroup size="small" aria-label="small outlined button group">
        <Button onClick={this.handleIncrement}>+</Button>
        {this.state.counter > 0 && Btn}
      </ButtonGroup>
    );
  }
}

export default GroupedButtons;

something like code above. but it doesn't work.

hello, please, add sample code – Anton Novik Dec 12 '19 at 13:52 — Anton Novik, Dec 12 '19 at 13:52

score 8 · Accepted Answer · answered Dec 12 '19 at 18:11

8

Material UI ButtonGroup expects only Button children. You pass React.Fragment as a child.

You can change the code this way:

import React from "react";
import Button from "@material-ui/core/Button";
import ButtonGroup from "@material-ui/core/ButtonGroup";

class GroupedButtons extends React.Component {
  state = { counter: 0 };

  handleIncrement = () => {
    this.setState(state => ({ counter: state.counter + 1 }));
  };

  handleDecrement = () => {
    this.setState(state => ({ counter: state.counter - 1 }));
  };
  render() {
    const displayCounter = this.state.counter > 0;

    return (
      <ButtonGroup size="small" aria-label="small outlined button group">
        <Button onClick={this.handleIncrement}>+</Button>
        {displayCounter && <Button disabled>{this.state.counter}</Button>}
        {displayCounter && <Button onClick={this.handleDecrement}>-</Button>}
      </ButtonGroup>
    );
  }
}

export default GroupedButtons;

See live demo here:

answered Dec 12 '19 at 18:11

Anton Novik

1,768
1
19
31

Yes. thank you. but when I click plus button, i want this button (plus button) not to move. this is what I see in your live demo. how can I animate minus and number part when It appears? @anton-novik – Sasan Rasouli Dec 12 '19 at 18:56
It's app styles, not your component. I've removed the app alignment not to confuse you (https://codesandbox.io/s/thirsty-rain-i1tzi?fontsize=14&hidenavigation=1&theme=dark) – Anton Novik Dec 12 '19 at 19:23
thank you very much. I've almost got it @anton-novik – Sasan Rasouli Dec 12 '19 at 20:08
If it answers your question, you can accept it (for more info see https://stackoverflow.com/help/someone-answers) – Anton Novik Dec 12 '19 at 20:57

score 3 · Answer 2 · edited Aug 05 '23 at 11:39

with hooks : I am using (product ['countInStock']) as an example of stock quantity

const [counter, setCounter] = useState(0);
return (
   <ButtonGroup size="small" aria-label="small outlined button group">
   <Button
     disabled={counter >= product["countInStock"]}
     onClick={() => {
       setCounter((counter) => counter + 1);
     }}
   >
     +
   </Button>
   <Button disabled>{counter}</Button>}
   <Button
     disabled={counter <= 0}
     onClick={() => {
       setCounter((counter) => counter - 1);
     }}
   >
     -
   </Button>
 </ButtonGroup>
)

Increment and Decrement button via Material UI ButtonGroup

Code

2 Answers2