React js Bootstrap Modal Example Tutorial

May 18, 2020 XpertPhp Comments 0 Comment

In this article, we will explain to you how to create a react js bootstrap modal example. in this article, we will create the bootstrap modal box in react js. so we have to install the react-bootstrap package for react js.

So, You can learn to react js step by step using the following our example(React js Bootstrap Modal example).

Create React App

In this step, if you want to create a react js application then you can follow the below command or Url for react js installation.

npx create-react-app react_bootstrap_modal
cd react_bootstrap_modal

1 2	npx create-react-app react_bootstrap_modal cd react_bootstrap_modal

Install bootstrap in react js

now, After the installation of react js, you can install the bootstrap using the below command.

npm install react-bootstrap bootstrap

1	npm install react-bootstrap bootstrap

here, we will import the bootstrap in the index.js file, so you can see the below code.
src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import 'bootstrap/dist/css/bootstrap.min.css';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

import 'bootstrap/dist/css/bootstrap.min.css';

import * as serviceWorker from './serviceWorker';

ReactDOM.render(

<React.StrictMode>

<App />

</React.StrictMode>,

document.getElementById('root')

);

// If you want your app to work offline and load faster, you can change

// unregister() to register() below. Note this comes with some pitfalls.

// Learn more about service workers: https://bit.ly/CRA-PWA

serviceWorker.unregister();

React js bootstrap modal

Now, we will create a bootstrap modal in the render function. so you can see the following example.

<div className="container">
	<h2>React js Bootstrap Modal Example Tutorial - XpertPhp</h2>
	<Button onClick={this.open}>Open Modal</Button>
 
	<Modal className="modal-container" show={this.state.showModal}  onHide={this.close} animation={true}>
		<Modal.Header closeButton>
			<Modal.Title>Model Title</Modal.Title>
		</Modal.Header>
		<Modal.Body>
			<p>Some text in the modal body.</p>
		</Modal.Body>
		<Modal.Footer>
		  <Button variant="secondary" onClick={this.close}>
			Close
		  </Button>
		</Modal.Footer>
	</Modal>
</div>

<h2>React js Bootstrap Modal Example Tutorial - XpertPhp</h2>

<Button onClick={this.open}>Open Modal</Button>

<Modal.Header closeButton>

<Modal.Title>Model Title</Modal.Title>

</Modal.Header>

<Modal.Body>

<p>Some text in the modal body.</p>

</Modal.Body>

<Modal.Footer>

</Button>

</Modal.Footer>

</Modal>

</div>

React js show bootstrap modal

here, we will take a showModal state variable and set as false. So it will be hidden. so you can see the below code.

this.state = {
 showModal: false
};

this.state = {

showModal: false

};

React js open bootstrap modal

we will create an open function for open the modal. when you click on the open button then we will be set showModal as true and it will open the modal. so you can see the below code.

open() {
   this.setState({showModal: true});
}

open() {

this.setState({showModal: true});

}

React js close bootstrap modal

we will create a close function for close the modal. when you click on the close button then we will be set showModal as false and it will close the modal. so you can see the below code.

close() {
  this.setState({showModal: false});
}

close() {

this.setState({showModal: false});

}

so you can see the full app.js file and Modify your file using the below code.
src/app.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Modal, Button } from 'react-bootstrap';
	
class App extends Component {
	constructor(props) {
		super(props);
		this.state = {
			showModal: false
		};
		this.open = this.open.bind(this);
		this.close = this.close.bind(this);
	}
	open() {
        this.setState({showModal: true});
    }
    close() {
        this.setState({showModal: false});
    }
	render() {
		return (
			<div className="container">
				<h2>React js Bootstrap Modal Example Tutorial - XpertPhp</h2>
				<Button onClick={this.open}>Open Modal</Button>
			 
				<Modal className="modal-container" show={this.state.showModal}  onHide={this.close} animation={true}>
					<Modal.Header closeButton>
						<Modal.Title>Model Title</Modal.Title>
					</Modal.Header>
					<Modal.Body>
						<p>Some text in the modal body.</p>
					</Modal.Body>
					<Modal.Footer>
					  <Button variant="secondary" onClick={this.close}>
						Close
					  </Button>
					</Modal.Footer>
				</Modal>
			</div>
		);
	}	
}

export default App;

import React, { Component } from 'react';

import logo from './logo.svg';

import './App.css';

import { Modal, Button } from 'react-bootstrap';

class App extends Component {

constructor(props) {

super(props);