Sunday, July 12, 2020
therichposts@gmail.com
Reactjs

Open bootstrap modal pop in Reactjs

Open bootstrap modal pop in Reactjs

Views

Hello, welcome to therichpost.com. In this post, I will tell you, How to Open bootstrap modal pop in Reactjs? Reactjs is a Javascript Library to build user interface.

boostrap-modal-popup-reactjs

In this post, we will Open bootstrap modal pop in Reactjs with install bootstrap library in reactjs.

In my older posts, I told you, how to install reactjs,  for this, you can check the below link:

https://therichpost.com/install-reactjs-easy-simple
After all this, for bootstrap library, first you need to install bootstrap into your reactjs app and for this, you need to run below command into your command prompt:
npm install bootstrap --save
After this need to install below code into your index.js file and bootstrap modal pop up will work perfectly into your react js app:
import React from 'react';
import ReactDOM from 'react-dom';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

class Hello extends React.Component{
  constructor(props) {
     super(props);
     this.state = {
      modal: false
    };
    this.toggle = this.toggle.bind(this);
  };
  toggle() {
    this.setState({
      modal: !this.state.modal
    });
  }
  render()
  {
    return (
      <div>
        <Button color="danger" onClick={this.toggle}>Open</Button>
        <Modal isOpen={this.state.modal} toggle={this.toggle}>
          <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
          <ModalBody>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </ModalBody>
          <ModalFooter>
            <Button onClick={this.toggle}>Cancel</Button>
          </ModalFooter>
        </Modal>
      </div>
    )
  }
}

ReactDOM.render(<Hello />, document.getElementById('root'));

 If you have any query related to this post then please comment below.

 

 

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10 Nodejs, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.