DEV Community: Ayush

Building Modals in ReactJS A Step-by-Step Guide

Ayush — Mon, 03 Jul 2023 02:46:44 +0000

Introduction:

Modals play a crucial role in enhancing user experience by displaying important information or interactive components in a visually appealing manner. In this tutorial, we will walk through the process of creating modals in ReactJS.

Prerequisites:

Before starting this tutorial, you should have a basic understanding of ReactJS and JavaScript. Familiarity with React functional components and React hooks, such as useState and useEffect, will be beneficial.

This is how the final code output would look like:

Now, let's dive into the tutorial on how to achieve this:

Step 1: Setting Up the Project

To begin, create a new React project by running the following command in your terminal:

npx create-react-app modal-demo

Navigate to the project directory and start the development server:

cd modal-demo
npm start

Step 2: Creating the Modal Component

In this step, we will create a new file called Modal.js inside the src directory. Open the file and add the following code:

import React, { useEffect } from 'react';
import './Modal.css';

const Modal = ({ isOpen, onClose, children }) => {
  useEffect(() => {
    const handleEscape = (event) => {
      if (event.key === 'Escape') {
        onClose();
      }
    };

    if (isOpen) {
      document.addEventListener('keydown', handleEscape);
    }

    return () => {
      document.removeEventListener('keydown', handleEscape);
    };
  }, [isOpen, onClose]);

  if (!isOpen) return null;

  return (
    <div className="modal">
      <div className="modal-content">
        <span className="close" onClick={onClose}>&times;</span>
        {children}
      </div>
    </div>
  );
};

export default Modal;

The Modal component is a functional component that takes three props: isOpen (a boolean indicating whether the modal is open or closed), onClose (a function to be called when the modal is closed), and children (the content to be displayed inside the modal).
The useEffect hook is used to add and remove an event listener for the keydown event. When the modal is open (isOpen is true), the event listener is added to detect the 'Escape' key press. If the 'Escape' key is pressed, the onClose function is called to close the modal.
The cleanup function returned by the useEffect hook is responsible for removing the event listener when the modal is closed or when the component unmounts.
If the modal is not open (isOpen is false), the component returns null, rendering nothing.

In React, components can be mounted and unmounted based on their visibility in the DOM. When a component is mounted, it means it has been inserted into the DOM and is actively rendered. Conversely, when a component is unmounted, it means it has been removed from the DOM and is no longer rendered.

In the case of the Modal component, the unmounting happens when the component is closed or when the App component that renders it is unmounted. When the App component unmounts, all its child components, including the Modal component, will also unmount.

Step 3: Styling the Modal

To make the modal visually appealing, let's add some CSS styles. Create a new file called Modal.css inside the src directory and add the following CSS code:

Step 3: Styling the Modal

To make the modal visually appealing, let's add some CSS styles. Create a new file called Modal.css inside the src directory and add the following CSS code:

.modal {
  display:flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  position: relative; 
}

.close {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  font-size: 24px;
}

The .modal class is used to style the container of the modal. It
uses flex to center the content both horizontally and vertically within the viewport.
The .modal-content class is applied to the inner content of the modal. It sets the background color, padding, and border-radius to give it a card-like appearance.
The .close class is used to style the close button of the modal. It positions the button in the top-right corner and sets its font size.

Step 4: Implementing the Modal in Your App

Now, let's integrate the Modal component into your application. Open the App.js file and replace its content with the following code:

import React, { useState } from 'react';
import Modal from './Modal';
import './Modal.css';

const App = () => {
  const [modalOpen, setModalOpen] = useState(false);

  const openModal = () => {
    setModalOpen(true);
  };

  const closeModal = () => {
    setModalOpen(false);
  };

  return (
    <div>
      <h1>Modal Demo</h1>
      <button onClick={openModal}>Open Modal</button>
      <Modal isOpen={modalOpen} onClose={closeModal}>
        <h2>Modal Content</h2>
        <p>This is the content of the modal.</p>
      </Modal>
    </div>
  );
};

export default App;

Step 5: Run the Application

Enhancing the Modal

Congratulations! You have successfully built a basic modal in ReactJS. Now, let's explore some use cases and additional enhancements to make your modals more attractive and functional.

Use Cases

User Login/Registration:
Display a modal form for users to log in or register.

Confirmations:
Ask user-s to confirm their actions with a modal dialog, such as deleting a post or unsubscribing from a newsletter.

Product Information:
Show detailed information about a product in a modal when a user clicks on it.

Image Galleries:
Create a modal gallery for displaying images in a larger view.

References for using Ready to use Dialog boxes
https://headlessui.com/react/dialog
https://ant.design/components/modal
https://mui.com/material-ui/react-dialog/
https://chakra-ui.com/docs/components/modal

Conclusion:

In this tutorial, you learned how to create modals in ReactJS. By following the step-by-step instructions and reviewing the code examples, you now have the knowledge to implement modals in your React applications.

Conditional Rendering in ReactJS

Ayush — Thu, 02 Mar 2023 06:29:49 +0000

One of the nicest thing in React is we can render components and elements conditionally.

Single Page applications are dynamic and event driven in nature. To make this possible
React has one feature called conditional rendering.

Wait what do you mean by rendering ?

By Rendering we mean to say that updating the page view based on changes in its state or props.

React components need to often display different user interface based on different conditions.

This concept is often applied in different situations:

Rendering external data from an API
Showing or hiding elements
Toggling application feature
implementing permission levels
Handling authentication and authorization

Lets see some ways of implementing conditional rendering in ReactJS
We have have a PackingList component rendering several Items, which can be marked as packed or not

Method 1

In Some situations we may not want to render anything at all. In that case we can return null

if (condition){
    return <div>{name}<div>;
}
return null;

If condition is true, it will return JSX to render, or else it returns null
Its not common to return null from component.

// App.jsx
function Item({ name, isPacked }) {
  if (isPacked) {
    return null;
  }
  return <li className="item">{name}</li>;
}

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item 
          isPacked={true} 
          name="Space suit" 
        />
        <Item 
          isPacked={true} 
          name="Helmet with a golden leaf" 
        />
        <Item 
          isPacked={false} 
          name="Photo of Tam" 
        />
      </ul>
    </section>
  );
}

Method 2 using ternary operator `?`

return (
    <div>
      {condition ? name + ' ✔' : name}
    </div> 
)

In the above code if condition is true (?)
then render name + ' ✔', or else ( : ) render name

// App.jsx
function Item({ name, isPacked }) {
  return (
    <li className="item">
      {isPacked ? (
        <del>
          {name + ' ✔'}
        </del>
      ) : (
        name
      )}
    </li>
  );
}

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item 
          isPacked={true} 
          name="Space suit" 
        />
        <Item 
          isPacked={true} 
          name="Helmet with a golden leaf" 
        />
        <Item 
          isPacked={false} 
          name="Photo of Tam" 
        />
      </ul>
    </section>
  );
}

Method 3 using Logical AND operator ( `&&` )

return (
    <div>
    {name} {condition && '✔'} 
    </div>
)

JavaScript && expression returns the value of its right side
if the lift side (condition) is true. But if the condition on left side is false
the whole expression becomes false, and dosen't render anything in its place.

We shouldn't put numbers on the left
side of && .JavaScript converts the left side to a boolean automatically. However, if the left side is 0, then the whole expression gets that value (0), and React will happily render 0 rather than nothing.

// App.jsx
function Item({ name, isPacked }) {
  return (
    <li className="item">
      {name} {isPacked && '✔'}
    </li>
  );
}

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item 
          isPacked={true} 
          name="Space suit" 
        />
        <Item 
          isPacked={true} 
          name="Helmet with a golden leaf" 
        />
        <Item 
          isPacked={false} 
          name="Photo of Tam" 
        />
      </ul>
    </section>
  );
}

Conditionally assigning JSX to a variable

The above 3 methods were shortcuts if theat becomes tricky or hard to use,
we can use if statement and a variable. You can
reassign variables defined with let

let itemContent=name;

Use an if statement to reassign a JSX expression to itemContent if
isPacked is true

if (isPacked) {
  itemContent = name + " ✔";
}

Curly braces open the “window into JavaScript”.
Embed the variable with curly braces in the returned JSX tree,

<li className="item">
  {itemContent}
</li>

This style is the most verbose, but it’s also the most flexible. Here it is in action:

function Item({ name, isPacked }) {
  let itemContent = name;
  if (isPacked) {
    itemContent = (
      <del>
        {name + " ✔"}
      </del>
    );
  }
  return (
    <li className="item">
      {itemContent}
    </li>
  );
}

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item 
          isPacked={true} 
          name="Space suit" 
        />
        <Item 
          isPacked={true} 
          name="Helmet with a golden leaf" 
        />
        <Item 
          isPacked={false} 
          name="Photo of Tam" 
        />
      </ul>
    </section>
  );
}

Happy Coding 😎

Closures In JavaScript

Ayush — Thu, 23 Feb 2023 07:51:20 +0000

Hey I am glad you are here! Today in this Blog We will be learning about Closures in JavaScript.

Basic Definition of Closure

A function along with its lexical scope bundled together is called a closure

So what do we mean by lexical scope 🤔 lexical
scope means the place where the variable or functions is created

Chatting is okay lets chat with code 😁

function x() {
    var a=10 // local variable 
    function y() {
      console.log(a)
    }
    return y;
}
x() // 10

In the above code we have a function x within that we have another function y.
Function x creates local variable and function y prints it to console.

Function y doesn't have any local variable of its own but it
has the access to local variable of its parent function
x because of the Closure concept in JavaScript.

function x() {

    function y() {
      console.log(a)
    }
    var a=10 // local variable 
    a++;
    return y;
}
x() // 11

Numerous Output questions can be formed on the basis of Closures concept.

To understand Closures properly we need to understand Execution Context first.

Functions run inside a Execution Context

What is execution context ? Its an abstract concept used by ECMAScript to track runtime evaluation of code.

Back to Closures

Every function creates an execution context. Execution Context comprises of comprises of variables
in the function they were created and reference to the parent's environment. Since execution context got
reference to its parent environment. All the variables of parent functions gets available to the inner function.

That's it for this blog!!

I hope you learnt something from my Blog!

Thank you!! 😁

Javascript Map Function Explained with Code

Ayush — Wed, 17 Aug 2022 21:22:00 +0000

Learning outcomes of this tutorial
Map function explained

Map fucntion
Map function returns a new array based upon original array. Original array dosen't gets modified.

Map function can at most accept 3 parameters current Element, index, orignal Array of which index and orignal Array parameters are optional to add.

const orignalArray=[1,2,3,4,5]
const newArray = orignalArray.map((currentElement,currentIndex,orignalArray)=> 
     {return currentElement*2}
)
console.log("orignalArray: ",orignalArray)
console.log("new Array: ",newArray)

Output

That's it for this blog.

Happy Learning !!
Happy Coding !!

DEV Community: Ayush

Building Modals in ReactJS A Step-by-Step Guide

Introduction:

Prerequisites:

Step 1: Setting Up the Project

Step 2: Creating the Modal Component

Step 3: Styling the Modal

Step 3: Styling the Modal

Step 4: Implementing the Modal in Your App

Step 5: Run the Application

Enhancing the Modal

Use Cases

Conclusion:

Conditional Rendering in ReactJS

One of the nicest thing in React is we can render components and elements conditionally.

Method 1

Method 2 using ternary operator ?

Method 3 using Logical AND operator ( && )

Conditionally assigning JSX to a variable

Happy Coding 😎

Closures In JavaScript

Hey I am glad you are here! Today in this Blog We will be learning about Closures in JavaScript.

Basic Definition of Closure

Back to Closures

Javascript Map Function Explained with Code

Method 2 using ternary operator `?`

Method 3 using Logical AND operator ( `&&` )