Phase 2 — React Project
I’d like to start by saying that React is a beast - in the best way possible.
After submitting my first project to Flatiron (JavaScript). I knew that I had to create something more robust, if only to impress myself.
One of the biggest problems I had with my first project was breaking down and properly planning what to build. Then, React came into the picture.
The idea of creating components and putting them together to make something more complex was perfect!
The easy part was learning JSX, medium was learning how to pass data from child to parent, hard was putting it all together to make something that not only works — but looks good while doing it.
I’m a night-owl. All my best ideas come to me at night.
Thus the idea for my React project came to me sometime after 12:30AM while I was binge-watching random Marvel movies on Disney+
A.I.R.S.
(Avengers Incident Reporting System)
The app allows user to fill out a form and submit a complaint against any of the Marvel characters and have it appear on this page.
My project is made up of many components, but the ones I want to focus on right now are the ones that make up the Emergency Alert.
To create this I made an Emergency Alert component and rendered it within my Home component.
I used the setTimeout function to create the timed alert.
I went back and forth between the Home and EmergencyAlert components a lot but for simplicities sake I’ll explain what I did in each component separately.
- After creating the EmergencyAlert component I created a button to eventually close the alert (Line 9) and put an onClick event handler within it. It changes the state of the trigger to false and allows you to close it.
- I passed in props (as we will use some information from the Home component later) in Line 4 and placed props.children (Line 8) so that when I finally finish the Emergency alert content in the Home component, that’s where it will appear.
- When you use setTimeout() you have to include a trigger so that the app knows when to go off. On Line 4 you will find props.trigger (the actual trigger will come later in Home).
- Next I put in a conditional operator (the ? on Line 4) so that when the state (which is declared in Home) of the trigger is True, the Emergency Alert will appear on the page.
- On line 12, ( : “”;) — says that if the state is false then we’ll only get an empty string returned.
- After importing useState, useEffect, and the EmergencyAlert component, I set the default state to false and began creating the timer.
- setTimeout requires you to declare how many milliseconds you want the function to wait before going off — in this case, I set it to 5000ms or 5s from the time you arrive the home page.
- Then, I wrapped it in useEffect so that it only goes off once. Otherwise, it’ll keep going off every 5s even though you haven’t refreshed the page.
We’re finally at the end!
- After importing the EmergencyAlert in the Home component, it’s time to render it, as shown above.
