"Troubleshooting: React Bootstrap Modal not appearing on screen

I am facing an issue with rendering a Bootstrap modal in my React app when a button is clicked. Here is the code snippet for my React app:

import React, { Component } from 'react';

import { Grid, Row, Col, Button, Table } from 'react-bootstrap';
import Modal from 'react-bootstrap-modal';

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

class Dashboard extends Component {
    constructor(props) {
        super(props);

        this.state = {
            show: false
        };

        this.showModal = this.showModal.bind(this);
    }

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

    render() {    
        return (
            <Grid>
                <Row>
                    <Col md={12}>
                        <Button bsStyle="success" className='btn-block' onClick={this.showModal}>Create</Button>

                        <Modal show={this.state.show} aria-labelledby='ModalHeader'>
                            <Modal.Header closeButton>
                                <Modal.Title id='ModalHeader'>A Title Goes here</Modal.Title>
                            </Modal.Header>
                            <Modal.Body>
                                <p>Some Content here</p>
                            </Modal.Body>
                            <Modal.Footer>
                                <Modal.Dismiss className='btn btn-default'>Cancel</Modal.Dismiss>
                                    <button className='btn btn-primary'>
                                        Save
                                    </button>
                            </Modal.Footer>
                        </Modal>

                    </Col>
                </Row>

            </Grid>
        );
    }
}

export default Dashboard;

Upon clicking the button to display the modal, I encountered an issue where the button became unclickable and despite verifying the DOM insertion of the modal, it remained hidden. I suspect there might be a CSS property interfering with the functionality or some other conflicting elements.

Here is the HTML output when the button is clicked:

<html lang="en"><head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->
    <link rel="manifest" href="/manifest.json">
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
    <!--
      Notice the use of  in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  <style type="text/css">body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}
</style><style type="text/css">.App {
  text-align: center;
}

.App-logo {
  -webkit-animation: App-logo-spin infinite 20s linear;
          animation: App-logo-spin infinite 20s linear;
  height: 80px;
}

.App-header {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
}

.App-title {
  font-size: 1.5em;
}

.App-intro {
  font-size: large;
}

@-webkit-keyframes App-logo-spin {
  from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@keyframes App-logo-spin {
  from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
</style></head>
  <body class="modal-open" style="overflow: hidden;">
    <div id="root" aria-hidden="true"><div><div class="container"><div class="row"><div class="col-md-2"><button id="stadiums" type="button" class="btn-block btn btn-default">Stadiums</button></div><div class="col-md-2"><button id="teams" type="button" class="btn-block btn btn-default">Teams</button></div><div class="col-md-2"><button id="matches" type="button" class="btn-block btn btn-default">Matches</button></div><div class="col-md-2"><button id="tickets" type="button" class="btn-block btn btn-default">Tickets</button></div><div class="col-md-2"><button id="users" type="button" class="btn-block btn btn-default">Users</button></div></div><div class="row"><div class="col-md-12"><button type="button" class="btn-block btn btn-success">Create</button></div></div><form class="form-horizontal"><div class="form-group"><label for="formHorizontalEmail" class="col-sm-2 control-label">Email</label><div class="col-sm-10"><input type="email" placeholder="Email" id="formHorizontalEmail" class="form-control"></div></div></form></div></div></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  <script type="text/javascript" src="/static/js/bundle.js"></script>

<div role="dialog"><div class="modal-backdrop fade in" style="z-index: 1040;"></div><div aria-labelledby="ModalHeader" class="modal fade in" role="document" tabindex="-1" style="z-index: 1050;"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button class="close" aria-label="Close Modal"><span aria-hidden="true">×</span></button><h4 id="ModalHeader" class="modal-title">A Title Goes here</h4></div><div class="modal-body"><p>Some Content here</p></div><div class="modal-footer"><button class="btn btn-default">Cancel</button><button class="btn btn-primary">Save</button></div></div></div></div></div></body></html>
javascriptcsstwitter-bootstrapreactjsbootstrap-4

Answer №1

This solution worked wonders for me! I hope it does the same for you too.

import React, { Component } from 'react';
import { Button } from 'react-bootstrap';
import { Grid, Row, Col, Modal } from 'react-bootstrap';

class Service extends Component{
  constructor(props) {
    super(props);

    this.state = {
      show: false
    };

    this.showModal = this.showModal.bind(this);
    this.hideModal = this.hideModal.bind(this);
  }

  showModal() {
    this.setState({
      show: true
    });
  }
  hideModal(){
    this.setState({
      show: false
    })
  }


  render(){

    return(

      <div className="App">

      <Grid>
            <Row>
                <Col md={12}>
                    <Button bsStyle="success" className='btn-block' onClick={this.showModal}>Create</Button>

                    <Modal show={this.state.show} onHide={this.hideModal} aria-labelledby='ModalHeader'>
                        <Modal.Header closeButton>
                            <Modal.Title id='ModalHeader'>A Title Goes here</Modal.Title>
                        </Modal.Header>
                        <Modal.Body>
                            <p>Some Content here</p>
                        </Modal.Body>
                        <Modal.Footer>
                          <button className='btn btn-primary'>
                            Save
                          </button>
                        </Modal.Footer>
                    </Modal>

                </Col>
            </Row>
        </Grid>

      </div> /* -----App div close-----*/

    )
  }
}

export default Service;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide for implementing pagination on a lengthy list with React MaterialUI

I'm currently working on a project using react and MaterialUI to create a list with filter functionality. The list will be populated with data from an Http request and may contain a large number of items. I was researching pagination in the MaterialUI ...

javascriptreactjspaginationmaterial-ui

Encountered an issue while attempting to start an SSR server with inertiajs

I followed all the necessary steps to set up an ssr application, but unfortunately, I am encountering some difficulties. config/inertia export const inertia: InertiaConfig = { view: 'app', ssr: { enabled: true, autoreload: process.en ...

javascriptnode.jsinertiajs

Troubleshooting TypeScript Modules in Visual Studio 2015 Update 2: Fixing the 'require' Undefined Error

While working in Visual Studio 2015 Enterprise with Update 2 installed, I decided to create a new TypeScript project called TypeScriptHTMLApp1 using the default template and settings. As part of this project, I added a new TypeScript file named log.ts and ...

javascripttypescriptvisual-studio-2015

Is it possible to select options in AngularJS based on certain criteria?

I created an AngularJS select menu that is currently functioning correctly: <select name="s1" id="s1" multiple="multiple" data-native-menu="false" data-role="none" ng-model="userlistSelect" ng-options="u.userId as u.fi ...

javascriptangularjs

Customizing the JavaScript Calendar in Qualtrics

I came across a JavaScript code snippet that allows you to embed a calendar into a Qualtrics question. Specify a date for the survey: <link href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css" rel="stylesheet" type="text/css" /> <script sr ...

javascriptqualtrics

Modify the appearance of material-ui checkbox

For my project, I am utilizing React along with the styled-component package for styling. However, I am facing an issue when it comes to styling the Material-ui checkbox using styled-component. The problem lies in narrowing the border of the checkbox, as t ...

cssreactjsfrontendmaterial-uistyled-components

Implementing Othello Minimax Algorithm in React.js Yields Unsuccessful Results

I need assistance with a recurring issue where the AI player consistently plays the first available move it encounters. My objective was to implement an AI using the Minimax Algorithm, but I'm facing challenges in achieving the desired functionality. ...

javascriptreactjsminimax

Using JavaScript to filter and reduce an array in order to merge strings together

I want to implement the filter and map approach rather than using a {for} loop to iterate through an array. Here is my previous code. I was filtering matching strings from an array and combining them. function oldFunction(data) { let dataDeleted = &a ...

javascriptecmascript-6

What is the best way to create a centered vertical line with text in the middle?

I attempted to replicate a form that contains a vertical line <span class="vertical-line">or</span> with text centered in it! How can I create a similar appearance like this form? I considered using hr but it generates a horizontal ...

htmlcss

Tips for incorporating a custom CSS design into a jQueryUI tooltip

I am struggling to apply my custom CSS class on top of the jQueryUI tooltip. Although the tooltip is displaying correctly, my styles are not being applied. Here is the code I'm using: $(document).ready(function () { $("#roles").tooltip({ content: ...

javascriptjqueryhtmlcssjquery-ui

Arrange a collection of objects by two criteria: the end time, followed by the status in accordance with the specified array order if the end times are equal

Is this the best method to arrange data by using infinity? I gave it a try but it doesn't quite meet my requirements. data = [{ "status": "Accepted", "endTime": "" }, { "status": "New", ...

javascriptarraysangularsorting

I keep receiving a blank request body while using express.js

I'm having trouble retrieving data from my database as the body of the request is empty. I've tried using parse-body and CORS, but it's still not working. I attempted various solutions without success. Backend code: const bodyParser = requir ...

javascriptexpress

Exploring the capabilities of Redux Toolkit's createEntityAdapter in designing versatile data grids

Seeking guidance on utilizing createEntityAdapter from Redux Toolkit. In my application, I display package information and details using the master/detail feature of the AG Grid library. Packages are loaded initially, followed by fetching detailed data as ...

javascriptreactjsreduxredux-toolkit

Having trouble initializing a React app: npm gets stuck at "discovering 0 security issues"

When creating my react app using the command "create-react-app app-name", I noticed that npm reported "found 0 vulnerabilities". Despite this, my directory was successfully created with 2 files: package.json and package-lock.json, as well as a folder nam ...

node.jsreactjsnpm

Encountering connectivity issues with MongoDB client and struggling to insert data while utilizing promises

Currently, I am experimenting with nodeJS and encountering an error when trying to establish a connection to the MongoDB Client. I have implemented promises for improved readability but am facing issues connecting. The code involves connecting to the datab ...

javascriptmongodb

"Maximizing Data Visualization with Fusion Chart's Caption and Subcaption in

I have been attempting to insert HTML tags and special characters into the fusion chart Caption and subCaption, but it is not working as expected. I followed the instructions in this documentation link and also referred to an older resource, but no succes ...

javascriptjqueryfusioncharts

Building custom directives in Angular.js with d3.js

Working with an angular.js directive and d3 integration can sometimes be tricky, but thanks to resources like stackoverflow it's definitely achievable. However, I'm currently facing issues with getting the arrows to display properly in my project ...

javascriptangularjssvgd3.jsdirective

Parsing URLs with Node.js

Currently, I am attempting to parse the URL within a Node.js environment. However, I am encountering issues with receiving null values from the following code. While the path value is being received successfully, the host and protocol values are returnin ...

javascriptnode.jsexpress

Leveraging Font Awesome and Material Icons within ngFor in Angular 2

I have a unique situation where I need to display a dynamic list of icons in a right side bar. These icons are added to the sidebar based on user actions and are displayed using the ngFor directive. The challenge here is that some icons come from Font Awe ...

cssangularfont-awesomengforgoogle-material-icons

Gaps Between Columns in Bootstrap 3 and 4

When it comes to creating a site with Bootstrap, a common issue arises when using columns such as col-md-4, col-md-3, col-md-6, etc... The problem occurs when you have rows that do not follow the column grid system, causing them to appear misaligned with ...

bootstrap-4