React Modal: A Step-by-Step Tutorial Even Your Grandma Can Follow! ;)

#javascript #react #modal

Hi there, fellow React enthousiasts! Today I'd like to do a step by step on how to use modals in React. Fear not, for I will guide you through each step with such clarity that even your dear grandma (or mom...) would be like, 'I could code that!' So, read along for a 'how to' of showing and hiding modals, handling form submissions. Ready? Let's dive into the (for me: sometimes still confusing) world of React modals!

Step 1: Firstly, we want to set up a React Project. Assuming you are already working in one, I'll skip to the next part
Step 2: There are some dependencies we need to import.
Our project 'depends' on it and without it, it would not work. Tell your grandmas it's like trying to bake a cake without flour...

We will import certain things at the top of our page. (React, 'useState' hook and other dependecies you might be needing
(it's like gathering all your ingredients, so that you have them ready for when you need them)

-Step 3: Let's define our component, in this case we'll call it 'formComponent

Step 4: Setting op our state. We use state to keep track of the values that are being entered in the form fields. It's like having a smart assistant that remembers the user's input until we need it. With the useState hook, we create a state variable called values to store the form values and a function called setValues to update that state. This helps us make our app more interactive and responsive. The input values I use, you can change them to the ones you will use in your form.

Step 5: Handling the change in our input fields Everytime we add a character in our input fields, we need to make sure that it's updating in our useState. That's why we create a function to handle this change and store it accordingly in the useState.

Step 6: Handling the form submission So, whenever we filled out the whole form, we need to send it somewhere to the back for it to be processed and taken care of. (grandmas: Think about writing a letter, putting it in the mailbox and let the mailman take further care of it

Step 7 (almost there): Showing and hiding the Modal The thing about a modal is that it gives you that extra sparkle on your project without having to create an entire new page for just a form. You open it, see the rest of the page in the background, but the focus lies on the Modal. Think of it in layers, your modal will be the top layer when opened, and the background will be the layer underneath.

So first we start by making 2 functions, one to open it and one to close it.

Step 8: Rendering the component If we want to see the mdoal, we need to render it so that the user is able to see and interact with it.

This is where we start returning things, so that the user can see it.

In this example I se a '+' sign as a button to open the modal. We'll add a 'onClick' event that will trigger the 'showModal' function.
note the 'modal hidden' it's to style the modal. When 'hidden' we cannot see it. When we press the '+' button, the classname will be 'modal'.

Step 9 (Be patient, 3 more to go): Implementing the content of the modal, when opened You can change my input with the input you'll need on your page. This step is were we will put content in our modals to display to the user.

Step 10: Let's add our form input fields!

You can change the form input tyoes to whatever you need to use in ours, this is just an example of some you can use.
Note that we call the function 'handlesubmit' we created above to do what needs to be done when we press that button we're about to add!

Step 11: FINAL STEP! Let's add our magic button who will handle everything without any other code needed..... just kidding, if only it were that simple on the back-end side...

Et voila, modal is ready in use. U can style the modal however you'd like. I used an overlay which blurred the layer below.
Below I put some screenshots of how my modal looks like in the project I used the modals in.