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.
Create an empty React project by running:
1npx create-react-app react-buttongroup-app
Install React Bootstrap and vanilla Bootstrap by running the following command inside the root directory:
1npm install react-bootstrap bootstrap
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;
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;
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;
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...
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;
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.
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.