For my second project for school I built a web based application for sifting through a database of movies. This application allows users to select movies out of a database and then add them to their personal watch list. I didn't want the movie list component of the application to get too crowded with information so I wanted to implement a pop up window. Unfortunately the popup window wasn't as simple to implement as I had hoped. In this blog I will provide my insights on what I have learned and hopefully it will help others. Note I'm still learning and this is more so guidance then a full lesson from an expert.
Let's get started. Here is a link to my repo. Clone and follow the ReadMe to run this in your code editor. https://github.com/Zander618/HorrorWatchList. If you navigate to the MovieList tab you can see what the popup I am refering to looks like if you click more info on any given movie.
To simplify my instructions I'll start from scratch. If you need additional instrusctions on starting a react app here is a link to React's website to create a react app. https://create-react-app.dev/ .After you run npx create-react-app my-app-name we can navigate into that new folder by cd-ing into it. Let's open it in our code editor using (code .). Then we can open it in the browser with npm start in the terminal or yarn start if you have yarn installed. You should see this as the boilerplate code.
Alright so the app works. Let's get rid of all this stuff to start with our own code.
We are going to remove App.css, App.test.js, logo.svg, reportWebVitals.js, and setupTests.js. The index.css can stay for styling. However I will not be going into styling today. Simply right click on the item and go down to delete permanently. In index.js remove the imports related to the components we have deleted.
The end result should look like this. Save and move on.
Next in App.js let's delete everything and start from scratch. We are going to simply add an H1 and a button tag between two div tags to the needed component code. I am using the react arrow function component. It should look like this.
Now we have something on our React App :)
From here we need a new component to be the popup. Click on add new file. Let's call it popup.js. Inside popup.js we are going to create a div tag within a div tag and a button tag inside of the two divs with some class names for some styling.
Let's create a popup.css to style this popup. Click on new file and name it popup.css. Without going into styling detail, this css displayed below will center your popup, give it some color to separate from the background and also position the close button in the top right.
Make sure to import the css into your Popup.js component (import "./popup.css").
Back to our App.js. Here is the magic. Let's import our Popup.js and then place it under our button. Now let's add state to trigger this popup. Import {useState} above and lets declare state. We will call it [buttonPopup,setButtonPopup]. We are going to set that state to false. Now we need to be able to change that boolean value. We are going to add an on click to our button. 
Finally let's pass that value as a prop to our Popup.js. When done it should look like this.
Now back in our Popup.js. We are going to create a ternary to show the popup using the popup as the true value. If it is truthy it will display the content and if it is falsey it will display nothing. We are going to use an empty string as nothing. We will then add a title and a description under it using an h3 tag and a p tag. That code should look like the following image below.
Success we have a pop up! When you click on POP UP you'll see our popup. Now we just need to work on closing it.
Now we need to pass our setButtonPopup as a prop to Popup.js. Back in Popup.js we will add that prop and put an onClick to the button inside our divs. We will then set that value to false and that will then change the value back to false. Now we can open and close our popup. SUCCESS!
Top comments (0)