reactjs

How to Open Popup Window in ReactJS

In this blog, we learn about How to Open Popup Window in ReactJS.
Important Point:
Strongly request first install node.js and visual studio code link for download visual studio code editor in your machine.Node.Js download from give link
download node.js
Then follow my step.
Step 1.First Install global package open command prompt and write this command and hit enter.

npm install -g create-react-app

Step 2.After installation of npm .Now we can create React Application.Write this command for creating App

create-react-app myapp //myapp is the application name

Step 3.After completion download go to the folder and start npm

cd myapp
//then  start npm 
npm start //automatically open in browser

Step 4.Now open your application visual studio code editor. click on file->” Open Folder”->Go to your project and select application myapp then click ok.
Step 5. Open src folder you can see some auto-generated file in src folder.Some file in src folder we don’t need first delete this file like “App.css”,”App.test.js” and “App.js”.
After that open index.js file from src folder then delete auto generated code from index.js file. copy this code on your index.js page.

////this package is used for create new component
import React from 'react';
////this package is used for insert in DOM
import ReactDOM from 'react-dom';
import './index.css';  //import index.css page

class TodoListCourse extends React.Component{
    
    constructor(){
        super();
        this.state={
            Course:['MCA','BCA','MBA','BBA','BTech']
        };
        
    }

    render(){
        
        return(
            <div className='popup'>
          <div className='popup_style'>
            <h1>{this.props.text}</h1>
            <ul>{
                this.state.Course.map(function(courses){
                    return<ToDoCourse key={courses} courses={courses}
                    />
                })
            }</ul>
             <button onClick={this.props.closePopup}>Cancel</button>
             </div>
            </div>
        )
    }
}

class ToDoCourse extends React.Component{
    render(){
       return(
            <li>{this.props.courses}</li>
       )
    }
}

class App extends React.Component {
    constructor() {
      super();
      this.state = {
        showPopup: false
      };
    }
//tooglePopup is a method name
    togglePopup() {
//Set the state
      this.setState({
        showPopup: !this.state.showPopup
      });
    }
    render() {
      return (
        <div className='app'>
          
          <button onClick={this.togglePopup.bind(this)}>show popup</button>
        {this.state.showPopup ? 
            <TodoListCourse
              text='User List' 
              closePopup={this.togglePopup.bind(this)}
             
            />
            : null
          }
        </div>
      );
    }
  };
//you can find root element index.html page
ReactDOM.render(<App/>,document.getElementById('root'));

Step 6.Open the index.css page and copy this code on your index.css.

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.completed{
  color:green;
}

.popup {
  position: fixed;
  width: 110%;
  height: 110%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-color:green;
}
.popup_style {
  position: absolute;
  left: 30%;
  right: 30%;
  top: 30%;
  bottom: 30%;
  margin: auto;
  background: powderblue;
}

.h1{
  background-color: aqua;
}

Finally Screenshot describe output after run the aaplication.Click on Show Popup button then you can see reasult.

Any question and suggestion related to this topic please comment.Thank you

Leave a Reply

Your email address will not be published. Required fields are marked *