In this article, we will learn how to copy text to the clipboard in ReactJS. There are two most commonly used methods: the copy-to-clipboard package and the Clipboard API. The copy-to-clipboard package provides a copy() function that allows us to copy text. The Clipboard API is a web browser API that also provides a few functions for clipboard interaction, including copying text. Prerequisites Installed npm ReactJS useState hook Approaches to Copy Text to Clipboard There are two primary approaches to copying text to the clipboard in ReactJS: ... Read More

Sometimes while working with with dates in JavaScript, it is common to need specific dates for calculations or validations. In this problem, we are given a date in the form of year-month-date and we have to subtract one month from it. In this article, we are going to learn how we can subtract one month from a given date using Moment.JS. Prerequisite Moment.js: Moment.js is a popular JavaScript library used for dealing with dates. This library is used to modify, parse, validate, manipulate, and display dates and times in JavaScript. Install Moment.js We ... Read More

Overriding CSS in Tailwind can be difficult when the default utility classes don't fully match your design requirements. In some cases, you may need to adjust specific styles like background colors or margins without affecting the rest of the layout. So, in this article, I'm going to show you different ways to override CSS selectors in Tailwind, so you can make the changes you need without disrupting your design. Approaches to Override CSS Selectors in Tailwind In this section, we'll look at simple ways to override styles in Tailwind CSS. Each approach will help you customize your ... Read More

Sometimes while working with dates and times, we need to manipulate or normalize them to a specific time. One such common need is to reset a date's time to the start of the day, i.e. 00:00:00 midnight. In this article, we are going to learn different approaches to set the time to 00:00:00 using Moment.js. Prerequisite Moment.js: Moment.js is a popular JavaScript library used to deal with dates. This library is used to modify, parse, validate, manipulate, and display dates and times in JavaScript. Install Moment.js We ... Read More

In this article, we will learn how to programmatically navigate using React Router. Programmatic navigation enables changing the URL of an application without reloading the page. We can use several approaches to programmatically navigate in a React application using React Router. Approaches to navigate using React Router To programmatically navigate a React application, we can use several methods based on the version of React Router. In React Router v6, the useNavigate hook is introduced, which is recommended for programmatic navigation. By calling the navigate function returned from useNavigate, we can navigate to other routes. In React Router v5, the ... Read More

Sometimes while working with with dates in JavaScript, it is common to need specific dates for calculations or validations. One such situation is when we are given a date and we have to determine the last day of the previous month. In this article, we are going to learn how we can last day of the Previous Month from Date in Moment.js. Prerequisite Moment.js: Moment.js is a popular JavaScript library used to deal with dates. This library is used to modify, parse, validate, manipulate, and display dates and times in JavaScript. We can install the Moment.js library in ... Read More

This article will let you understand the vertical-align property in CSS. Here, we discuss the limitations of the vertical-align property and a few methods to overcome this, and hence, you will learn the solution to make the vertical-align property work on a div tag. Why does vertical-align don't work on div elements? Remember, the `vertical-align` property only works on inline, inline-block, and table-cell elements. You cannot use it to align block-level elements vertically. Tables work differently than divs because all the rows in a table are the same height. If a cell doesn’t have much content, the browser ... Read More

Passing data from one component to another is an essential part of building complex React applications. React props and states are fundamental concepts in React. Props stand for properties, which are used for passing data from one component to another, while State is used to manage data within a component. Prerequisites ReactJS Props ReactJS State Passing Data from Child Component to Parent You can easily pass data from a parent component to a child component with the help of props. Passing data from a child component to a ... Read More

Data security maintenance plays a critical role in online applications. MIME Sniffing is one such vulnerability, which results from improper installation of security headers and the unauthorised execution of content. A browser will try to get a resource MIME type by content rather than just the Content-Type header. A server sends that header along with a resource. This behaviour can be stopped with the help of the X-Content-Type-Options HTTP header adding to the security fortification. A developer will instruct a browser to firmly follow the defined Content-type and disallow MIME sniffing by this header. The following discussion will provide insights ... Read More

In this article, we are going to learn how to iterate on list or collection of data dynamically. However, directly using a loop is not a valid syntax in JSX. It is crucial to understand how to use loops inside React JSX. By iterating on arrays or any collections of data, we can render the component dynamically. Prerequisites ReactJS JSX Approaches to Loop inside React JSX The map() function and other methods can be used to repeat elements in JSX when we need to iterate over a list ... Read More