An issue arises when trying to import the modal popup

Hey there! I'm currently trying to implement a modal popup in react-bootstrap, but I keep running into an error that says "Props not defined". I followed the instructions from the react-bootstrap documentation, but I can't seem to figure out what's causing this error.

/src/components/AddProcessModal.js
  Line 24:28:  'props' is not defined  no-undef

Below is the code snippet:

export class AddProcessModal extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Modal
        {...this.props}
        size="lg"
        aria-labelledby="contained-modal-title-vcenter"
        centered
      >
        <Modal.Header closeButton>
          <Modal.Title id="contained-modal-title-vcenter">Add KPI</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <div className="container">Add KPI Fields for BPMS</div>
        </Modal.Body>
        <Modal.Footer>
          <Button onClick={props.onHide}>Close</Button>
        </Modal.Footer>
      </Modal>
    );
  }
}
export default AddProcessModal;

Answer №1

Can you please review this section?

 <Modal.Footer>
          <Button onClick={this.props.onHide}>Close</Button>
 </Modal.Footer>

The correct syntax should be this.props.onHide instead of props.onHide.

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

Creating dynamic dropdowns with Ajax and HTML on the code side

I have developed a script that generates a drop-down menu and updates the .box div with a new color and image. Below is the HTML & Java code: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <div> ...

Learn how to pass an id from the query parameters to the getInitialProps function in Next.js

Looking to create a basic website that displays content from a database? Utilizing the getInitialProps function from Next.js documentation can help with server-side rendering: https://nextjs.org/docs/api-reference/data-fetching/getInitialProps#getinitialpr ...

Difficulty encountered while implementing Ajax POST in CodeIgniter

I've been working on a project similar to a ticket system that occasionally requires lengthy answers. When using CKEDITOR in the answer area, the agent's changes are automatically saved to the database using Json GET. However, I encountered an er ...

The Docker build encountered an error due to confusion with MERN dependencies

Utilizing the MERN stack, this application is built with ReactJS, Node, and MongoDB. I have successfully created a docker container that runs the frontend, but unfortunately, an error keeps arising which I can't seem to pinpoint. The error message I ...

Encountering issues with the phaser framework while setting up a server on xampp, faced with errors in javascript and html

Recently, I've been working on a game using Phaser and encountered some issues while trying to run the code in XAMPP. The game's base is located at htdocs/itw/test.html, with the necessary pngs and json file stored in htdocs/itw/assets/. The pngs ...

When using jQuery to focus on an input element, the cursor fails to show up

Looking to enhance user experience by focusing on an input element upon clicking a specific div. The HTML structure being used is as follows: <div class="placeholder_input"> <input type="text" id="username" maxlength="100" /> <div ...

What is the correct method for orchestrating API requests during deployment with create-react-app and an ExpressJS backend?

I have encountered a problem while trying to deploy my react application to the server. After deployment, when the app attempts to make API calls to the same server, an error occurs: Cross-Origin Request Blocked: The Same Origin Policy disallows reading ...

Error with decodeURIComponent function in Internet Explorer 8

My widget, loaded as an iframe, requires data about the hosting page. I have UTF-8 strings extracted from a page with Russian text. The page itself has proper HTML5 doctype and meta charset. This is how my code operates: params = "x1=" + encodeURICompone ...

What is the accurate way to determine the total number of minutes elapsed from a specific point in time?

String representation of the process start date: '2020-03-02 06:49:05' Process completion date: '2020-03-02 07:05:02' Question: What is the optimal method for calculating the time difference (in minutes) between the start and end ...

implementing multiple updates in Mongoose for MongoDB

There are often times when I need to make multiple update requests based on various conditions. if (some true condition) { let recordBeforeUpdate = await this.PatchModel.findOneAndUpdate({ "_id": patchId }, { $inc: { inStockPallets: -1, f ...

TypeScript Type Mapping for HTML Element Tags

I am currently working on a TypeScript + React project and facing an issue with the polymorphic as prop in one of my components. Specifically, I want to restrict this prop to only accept HTML tags, excluding ReactNodes or JSX Elements. Unfortunately, I hav ...

The JavaScript and CSS properties are not functioning properly with the HTML text field

I came across this CodePen example by dsholmes and made some modifications: Here Furthermore, I have developed my own form on another CodePen pen: Link The issue I'm facing is related to the placeholders/labels not disappearing when typing in text f ...

Can a page name and folder name containing dynamic pages be identical?

insert image overview here In the image above, I have a section called "Movies" along with a directory named movies I am trying to navigate so that if the URL in the address bar is '/movies', it directs me to the "movies.js" page. Only when the ...

Tips for incorporating a svg file into your React project

I am facing an issue with my custom React, Typescript, and Webpack project. I am trying to import a basic .svg file and utilize it in one of my components. However, Typescript is throwing the following error: Cannot find module I have tried installing s ...

AngularJS provides a way to create opening pages with clickable buttons for a

I'm struggling to implement buttons that switch ons-templates when clicked. I've been following this example as a reference: Here's the code snippet I've been working on, but it just won't cooperate: <!doctype html> &l ...

Is it possible to trigger an event each time an Ajax request is made within AngularJS?

I am looking for a way to automatically display a spinner with a dark overlay every time a call is made to the backend. While I know I can manually implement this by triggering the spinner before each call, I prefer a solution that does not require addit ...

Sorting rows dynamically with jQuery Tablesorter

I've been struggling to find a solution for my specific issue. I need to have a static row in a large table that will not sort or move, allowing for repeated headers. Can anyone offer assistance with this? $("#dataTable").tablesorter({ ...

Issues with React useState persisting new values between useEffect intervalsHere is a rephrased

I am attempting to store jokes and log a new value every time the interval runs (triggered by a get call) after 5 seconds. However, for some reason, the value is not rendering anything after each interval. I'm not certain if the jokes are actually bei ...

Stop the slideshow when hovering

I have successfully implemented a script for running a slideshow. The script works well and does the job perfectly. jQuery(document).ready(function ($) { setInterval(function () { moveRight(); }, 5000); var slideCount = $('#slider ul li' ...

Unable to invoke function on HTML element

Recently, I've ventured into writing jQuery-like functions in Vanilla JS. While my selectors seem to be working fine, I encounter an "is not a function" error when trying to call the append function on an HTML element. var $ = function(){ this.se ...