A Model Modal in React
A couple of my recent posts have had to do with implementing some standard functional features in a React project that I’ve been working on. This post will be the third installment in the this practical React series, and will focus on the implementation of a pop up modal.
Pop up modals are great UX tools. They’re useful for when you want a user to only see information when they click on certain items. Plus, they allow the information to appear/disappear without the user having to leave the particular route/view that they are on.
The image above shows a page on my site, for a particular fishing destination (it’s not fully styled yet, so don’t mind the mess). Under the description/image of the location, the page shows a list of of past trips that the user has taken to that location. Each trip card has date and a button to show/hide details for that trip. Can you guess what’s gonna be appearing on our modal on this page?
If you guessed the ‘trip details’, then a gold star for you! The idea is that the user will be able to click the button and have the corresponding details for the given trip appear on a pop up (hours fished, lures used, fish targeted etc). Let’s now walkthrough how to go about doing that.
Above we have the main render on our main view for a given location. Here you can see the part we will be focusing on is the div with the class name “pastTripCards” . This div contains some simple JSX to take us to a function within this class called displayTripCards(). Let’s now take a gander at that function.
This function is going to map through the foundTrips array in our state (which is made up of all the fishing trips that the user has taken at this location), and for each trip, it will make a new TripCards component, while passing through the each trip object as props. Easy enough. To check out what’s really going on behind the curtain though, we need to take a closer look at my TripCards component.
The main return for this component is pretty much as expected, given what the user sees in the first image. You can see a title with the trip’s date, and the button to show/hide details, which are both created for each trip. Let’s focus on the onClick function of the the button, which leads us to a function called showStateChange.
Since I’ve made this a class component, it can have state. In this case each trip card will have a state of show which can be either true or false. On the click of the show/hide details button the state will toggle between true and false.
For me it was key to have the show state on this modal, because if it was on the main page then you’d have a situation where every time the user clicked one of the show/hide buttons then the user would see the pop up modal for every trip!
However, this alone does not show/hide or pop up modal; it merely changes state. So let’s look the modal function from the previous screen of our final render.
This simple function checks to see if show is set to true, and if it is, then we’ll render another component, TripsModal.
This component is pretty straight forward (honestly, there’s no need fore it to be a stateful component at all.). For each trip it simply shows/hides this info in a styled pop up when the show/hide details button is clicked. You can see that to acquire some of the info from our backend, we need the help of a couple more components, TargetSpecies, and BestLure, but that’s not really relevant to explaining the ins and outs of making our pop up modal.
Here you can see a quick (if slightly off-centered) image of the moderately styled modal. I added a little background image, but could go on to style the text etc. You could also include the button on the modal itself, but for us this is just fine!
