About Link
Discover how to create and control a modal About view in a Python and React web app using Transcrypt. Learn to manage component state, handle user events for opening and closing modals, and integrate props cleanly. This lesson helps you build interactive modal windows that improve navigation and usability in your web application.
We'll cover the following...
About the application
In this application, we will look at a state variable aboutShow to handle the state oof our About component. We have setAboutShow function to change our state variable’s value. Then, we have event.preventDefault() to prevent the page from refreshing.
This is what the application looks like:
Copyright (c) 2020 John Sheehan Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies. THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
The About view component
Now that we have a modal About view component, we’ll look at a way to open and close it. There are two things to pass into the aboutModal component, a modalState prop and an onClose() function. We can see both of those items, as ...