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.

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

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.

Feathercut

hello, please, add sample code – Oleaginous

Hello, updated. – Feathercut

Answer 1

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:

Oleaginous

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 – Feathercut

It's app styles, not your component. I've removed the app alignment not to confuse you (codesandbox.io/s/…) – Oleaginous

thank you very much. I've almost got it @anton-novik – Feathercut

If it answers your question, you can accept it (for more info see stackoverflow.com/help/someone-answers) – Oleaginous

Answer 2

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>
)

Visional