Wednesday, July 10, 2024

Open bootstrap modal pop in Reactjs

Open bootstrap modal pop in Reactjs

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


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:
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) {
     this.state = {
      modal: false
    this.toggle = this.toggle.bind(this);
  toggle() {
      modal: !this.state.modal
    return (
        <Button color="danger" onClick={this.toggle}>Open</Button>
        <Modal isOpen={this.state.modal} toggle={this.toggle}>
          <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
            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.
            <Button onClick={this.toggle}>Cancel</Button>

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

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



the authortherichpost
Hello to all. Welcome to Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

Leave a Reply

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