Using the ButtonGroup Component in React Bootstrap

ButtonGroup is a wrapper component in React Bootstrap that allows you to group buttons together. It has many use cases in toolbars, pagination, dropdown menus, and related UI components.

Nov 10, 2020 • 5 Minute Read

Subscribe to the newsletter

Introduction

ButtonGroup is a wrapper component in React Bootstrap that allows you to group buttons together. It has many use cases in toolbars, pagination, dropdown menus, and related UI components. When grouping buttons together, you need a way to tell which button is clicked from the group to trigger an event. For instance, if you have a ButtonGroup component for pagination, each Button component refers to a page number in your app. When a button is clicked, you need to know the page number associated with that button.

This guide explains how to use ButtonGroup in React Bootstrap to extract relevant information about each button.

Implementation

Create an empty React project by running:

      npx create-react-app react-buttongroup-app

Install React Bootstrap and vanilla Bootstrap by running the following command inside the root directory:

      npm install react-bootstrap bootstrap

Inside the App component, import Bootstrap's stylesheet along with the Button, and ButtonGroup components from React Bootstrap .

          import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Button from 'react-bootstrap/Button';

function App() {

  return (
    <div className="App">
      <header className="App-header">
      
      </header>
    </div>
  );
}

export default App;
    

Render three Button components inside the ButtonGroup component, as shown below.

          import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Button from 'react-bootstrap/Button';

function App() {

  return (
    <div className="App">
      <header className="App-header">
      <ButtonGroup>
        <Button variant="primary" >Button 1</Button>
        <Button variant="danger" > Button 2</Button>
        <Button variant="warning">Button 3</Button>
      </ButtonGroup>
      </header>
    </div>
  );
}

export default App;
    

In order to read any button clicks inside the ButtonGroup component, you need to set up an onClick handler that takes in the event object. This event object can be utilized to extract information about the button clicked. Add a value attribute inside each Button component to identify which button is clicked.

          import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Button from 'react-bootstrap/Button';

function App() {

  return (
    <div className="App">
      <header className="App-header">
      <ButtonGroup>
        <Button variant="primary" value="Button 1">Button 1</Button>
        <Button variant="danger" value="Button 2"> Button 2</Button>
        <Button variant="warning" value="Button 3">Button 3</Button>
      </ButtonGroup>
      </header>
    </div>
  );
}

export default App;
    

When Button 1 is clicked, you need to read the value Button 1, and the same goes for the rest of the buttons. This information can be extracted from the event object by accessing the value property on its target property as event.target.value. By setting an onClick event on the ButtonGroup component, you can fire the function handleClick in which you obtain the required information from the event object.

          ...
  const handleClick=(e)=>{
    console.log(e.target.value)
  }
  return (
    <div className="App">
      <header className="App-header">
      <ButtonGroup onClick={handleClick}>
       ...
      </ButtonGroup>
      </header>
    </div>
  );
...
    

Final Code

Here's the complete code.

          import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Button from 'react-bootstrap/Button';

function App() {
  const handleClick=(e)=>{
    console.log(e.target.value)
  }
  return (
    <div className="App">
      <header className="App-header">
      <ButtonGroup onClick={handleClick}>
        <Button variant="primary" value="Button 1">Button 1</Button>
        <Button variant="danger" value="Button 2"> Button 2</Button>
        <Button variant="warning" value="Button 3">Button 3</Button>
      </ButtonGroup>
      </header>
    </div>
  );
}

export default App;
    

When any of the buttons are clicked, the value of that button passes through the onClick handler and can be accessed inside the handleClick function, as shown above. You can check the value by clicking the button and reading the console.

Conclusion

The approach followed in this guide of using ButtonGroup can be extended to input fields and forms as well. You can also use the data-key attribute instead and get the required information by referencing event.target.attributes.getNamedItem('data-key').value. You can use the same concept to build custom dropdown components or a custom toolbar. If you have any questions, feel free to contact me at Codealphabet.