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.
[php]
npm install -g create-react-app
[/php]
Step 2.After installation of npm .Now we can create React Application.Write this command for creating App
[php]
create-react-app myapp //myapp is the application name
[/php]

Step 3.After completion download go to the folder and start npm
[php]
cd myapp
//then start npm
npm start //automatically open in browser
[/php]

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.
[php]
////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’));

[/php]

Step 6.Open the index.css page and copy this code on your index.css.
[php]
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;
}
[/php]

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

If This article helped you. Humble request to you please donate small amount only 5 Ruppes or 1 Ruppes so that I can help the needy poor people. Send amount this phonepe upi id : 8800846247@ybl or google pay 8800846247. Thank you from my bottom of heart.

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

Leave a Reply

Your email address will not be published.