Gaurav Singhal

Using the ButtonGroup Component in React Bootstrap

Gaurav Singhal

Nov 10, 2020
5 Min read
7,477 Views

Nov 10, 2020
5 Min read
7,477 Views

Web Development

Client-side Frameworks

React

Front End Web Development

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:

1npx create-react-app react-buttongroup-app

shell

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

1npm install react-bootstrap bootstrap

shell

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

1import './App.css';
2import 'bootstrap/dist/css/bootstrap.min.css';
3import ButtonGroup from 'react-bootstrap/ButtonGroup';
4import Button from 'react-bootstrap/Button';
5
6function App() {
7
8  return (
9    <div className="App">
10      <header className="App-header">
11      
12      </header>
13    </div>
14  );
15}
16
17export default App;

jsx

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

1import './App.css';
2import 'bootstrap/dist/css/bootstrap.min.css';
3import ButtonGroup from 'react-bootstrap/ButtonGroup';
4import Button from 'react-bootstrap/Button';
5
6function App() {
7
8  return (
9    <div className="App">
10      <header className="App-header">
11      <ButtonGroup>
12        <Button variant="primary" >Button 1</Button>
13        <Button variant="danger" > Button 2</Button>
14        <Button variant="warning">Button 3</Button>
15      </ButtonGroup>
16      </header>
17    </div>
18  );
19}
20
21export default App;

jsx

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.

1import './App.css';
2import 'bootstrap/dist/css/bootstrap.min.css';
3import ButtonGroup from 'react-bootstrap/ButtonGroup';
4import Button from 'react-bootstrap/Button';
5
6function App() {
7
8  return (
9    <div className="App">
10      <header className="App-header">
11      <ButtonGroup>
12        <Button variant="primary" value="Button 1">Button 1</Button>
13        <Button variant="danger" value="Button 2"> Button 2</Button>
14        <Button variant="warning" value="Button 3">Button 3</Button>
15      </ButtonGroup>
16      </header>
17    </div>
18  );
19}
20
21export default App;

jsx

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.

1...
2  const handleClick=(e)=>{
3    console.log(e.target.value)
4  }
5  return (
6    <div className="App">
7      <header className="App-header">
8      <ButtonGroup onClick={handleClick}>
9       ...
10      </ButtonGroup>
11      </header>
12    </div>
13  );
14...

jsx

Final Code

Here's the complete code.

1import './App.css';
2import 'bootstrap/dist/css/bootstrap.min.css';
3import ButtonGroup from 'react-bootstrap/ButtonGroup';
4import Button from 'react-bootstrap/Button';
5
6function App() {
7  const handleClick=(e)=>{
8    console.log(e.target.value)
9  }
10  return (
11    <div className="App">
12      <header className="App-header">
13      <ButtonGroup onClick={handleClick}>
14        <Button variant="primary" value="Button 1">Button 1</Button>
15        <Button variant="danger" value="Button 2"> Button 2</Button>
16        <Button variant="warning" value="Button 3">Button 3</Button>
17      </ButtonGroup>
18      </header>
19    </div>
20  );
21}
22
23export default App;

jsx

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.

LEARN MORE