Building a Modal Using ReactJS and TailwindCSS
Tags: react, javascript, webdev
Published: 2022-02-07 15:05:52

Hello people, as developers, we frequently come across tasks to create forms. The general first thought that comes to our mind is to create a button or link that takes us to the form when clicked. But this way is too old school and makes an extra effort for the user to navigate. Curious to know another method. Yes, that is what "Modals" are. 

Instead of routing to a new page or tab, the form appears right on the same page. Still not clear, let's understand it with a snapshot of the final page we will be building today. 

#### Modal In Action - 

![Frame 1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1644152368485/dPsIHYcLW.png)

When the button is clicked, we can observe the form comes right there instead of going to a new page. 


Now let's get into building this simple modal. I hope you ignore the CSS.

### Pre Requirements- 
* Basic knowledge of HTML, CSS and ReactJS (specifically useState).
* Experience in using Tailwind CSS in ReactJS projects. 

### Setup 
#### Setting Up ReactJS project
* Create a project directory. Let's say "modal."
* Open the terminal.
* Navigate to the modal directory and run the below command. 

```npx create-react-app .``` 
* Delete every file in src folder except for "App.js", "index.css", "index.js". 
* Clear out App.js

**Bonus-1** - If you wish to avoid the above hassle, clone my ReactJS project boiler and do: "npm i".

{% github https://github.com/ayushhagarwal/ReactJS_Project_Boiler no-readme %}

#### Setting Up Tailwind CSS
I have used Tailwind CSS official docs to write the steps on installing it into your ReactJS project. So you can refer directly to the site too. 

Here's how you can install Tailwind CSS - 
* In the root directory of your project folder, run the below commands: 

```npm install -D tailwinds postcss autoprefixer``` 

```npx tailwindcss init``` 

* Add the paths to all of your template files in your `tailwind.config.js` file. This is what the file looks like after adding them. 

```
module.exports = {
      content: [ 
      "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
} 
``` 


* Add the `@tailwind` directives for each of Tailwind's layers into the `./src/index.css` file. 

``` @tailwind base;
@tailwind components;
@tailwind utilities; ``` 


That's it. Now the project is ready with both TailwindCSS and ReactJs. We can start coding our Modal. 

**Bonus-2 ** - Instead of spending time on setting up ReactJS and TailwindCSS, you can clone the boiler repo from my Github. It is ready with all the setups and folder structure. Just clone, install and code. 

{% github https://github.com/ayushhagarwal/ReactJS_Tailwind_Boiler no-readme%}

### Creating Modal Component

Now comes the integral part of this blog. We will be creating a modal component and using it directly on `App.js` to render our modal. 

* Create a file `Modal.js` in `src/Components` directory.
* Next, the code to get the Modal functionality working is : 
```
import React, { useState } from "react";

const Modal = () => {
  const [showModal, setShowModal] = useState(false);
  return (
    <>
      <button
        className="bg-blue-200 text-black active:bg-blue-500 
      font-bold px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1"
        type="button"
        onClick={() => setShowModal(true)}
      >
        Fill Details
      </button>
      {showModal ? (
        <>
          <div className="flex justify-center items-center overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none">
            <div className="relative w-auto my-6 mx-auto max-w-3xl">
              <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
                <div className="flex items-start justify-between p-5 border-b border-solid border-gray-300 rounded-t ">
                  <h3 className="text-3xl font=semibold">General Info</h3>
                  <button
                    className="bg-transparent border-0 text-black float-right"
                    onClick={() => setShowModal(false)}
                  >
                    <span className="text-black opacity-7 h-6 w-6 text-xl block bg-gray-400 py-0 rounded-full">
                      x
                    </span>
                  </button>
                </div>
                <div className="relative p-6 flex-auto">
                  <form className="bg-gray-200 shadow-md rounded px-8 pt-6 pb-8 w-full">
                    <label className="block text-black text-sm font-bold mb-1">
                      First Name
                    </label>
                    <input className="shadow appearance-none border rounded w-full py-2 px-1 text-black" />
                    <label className="block text-black text-sm font-bold mb-1">
                      Last Name
                    </label>
                    <input className="shadow appearance-none border rounded w-full py-2 px-1 text-black" />
                    <label className="block text-black text-sm font-bold mb-1">
                      Address
                    </label>
                    <input className="shadow appearance-none border rounded w-full py-2 px-1 text-black" />
                    <label className="block text-black text-sm font-bold mb-1">
                      City
                    </label>
                    <input className="shadow appearance-none border rounded w-full py-2 px-1 text-black" />
                  </form>
                </div>
                <div className="flex items-center justify-end p-6 border-t border-solid border-blueGray-200 rounded-b">
                  <button
                    className="text-red-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1"
                    type="button"
                    onClick={() => setShowModal(false)}
                  >
                    Close
                  </button>
                  <button
                    className="text-white bg-yellow-500 active:bg-yellow-700 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1"
                    type="button"
                    onClick={() => setShowModal(false)}
                  >
                    Submit
                  </button>
                </div>
              </div>
            </div>
          </div>
        </>
      ) : null}
    </>
  );
};

export default Modal;

```

### Understanding the Code Logic
The code looks complex, right? Don't worry, I'll break the logic into simple terms and help you understand. So let's see step by step what is happening. 

1. In the `useState` hook : 
```
const [showModal, setShowModal] = useState(false);
```
We have defined the initial state as `showModal` and the update function as `setShowModal`. This function will tell us if we intend to show the Modal or not. 

Next to the right side of `=`, we have defined the default value of the initial state, i.e., `showModal` as false.

2. Next, we have a `<button>` tag. This button is to get to the form, so we have added a React `onClick` event. Whenever the user clicks the button, it will set the `showModal` to true using `setShowModal`. 

3. That's it. After that, we have a ternary condition that displays the form using TailwindCSS. If `showModal` is "true" the meaning button was clicked. 

4. The basic gist is if the `showModal` state is true, we have to display the form; otherwise, the Form is closed. 

5. At the end, we export the component to use it in `App.js` to render it on our page. 

### Rendering Modal Component 
As we are very well aware of rendering a component in React, we have to import it in `App.js`. So we will do the same, with some basic CSS to the home page.

```
import Modal from "./Components/Modal";
const App = () => {
  return (
    <div className="App h-screen flex flex-col items-center justify-center bg-purple-200">
      <Modal />
    </div>
  );
};

export default App;
```
### Launching the Application

That's it; we have come to the end of creating a modal in React. To check. Our project just does `npm start` and voila!!. 

### Conclusion 

Via this blog, I have tried my best to try and teach a small but valuable mini project in React. The link to the Github repo of the project is below: 

[ReactJS Tailwind CSS Modal](https://github.com/ayushhagarwal/ReactJS_Tailwind_Modal)

I would love to read your thoughts about the blog, so please comment below. 

Lastly, Your support keeps me going, and I give my 100 percent to these blogs! If you've found value, consider fueling the blog with a coffee ☕️ donation at the below link. 

[**Buy me a COFFEE!**](https://www.buymeacoffee.com/ayushdev)

Thank you! 🙏

Hope to meet you again in my next blog. Bubye 👋🏻