Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Front End Technology Articles
Page 141 of 652
How to update an object with setState in ReactJS?
In React, state objects store component data that can change over time. This tutorial covers how to update state objects using both class components with setState() and functional components with hooks. Using setState() in Class Components The setState() method is used to update state in class components. When updating nested objects, use the spread operator to preserve other properties. Syntax this.setState({ student: { ...this.state.student, fees: new_value, }, }); Example: Updating Simple State Object This example shows how to update a ...
Read MoreHow to Trim White Spaces from input in ReactJS?
We will learn to trim white spaces from the input in ReactJS. Sometimes, users add unnecessary space at the start or end of the input by mistake. So, as a developer, we need to check if the input string contains the white space at the start or end. If we find white spaces in the input, we should trim it; Otherwise, it can cause issues. For example, we need to store the email in the database, and while registering the email, the user has also added the white spaces by mistake, and we stored the email in the database ...
Read MoreHow to validate a Date in ReactJS?
Sometimes, we require to take the date from the users in string format. Users can make mistakes while entering the date value into the input field, so we need to validate the date string in our application code. Below, we will learn various solutions to validate dates in ReactJS. Using the Validator NPM Package The Validator is an NPM package that contains various methods to validate strings. It includes the isDate() method to validate date strings with any delimiter. It also contains methods to validate emails and phone numbers. Use the below command to install the ...
Read MoreHow to Validate an Email in ReactJS?
Email validation is an important feature we need to add to authentication forms. Nowadays, most applications use email and a one-time password for authentication. If the user enters the wrong email, they should not be able to authenticate themselves. Also, we need to validate the email while getting the user's email via contact forms. The user may enter the wrong email format due to some mistake. To correct users' mistakes, we can alert them by showing an error message. Below, we will learn two approaches to validate email addresses in ReactJS using different methods. Using the validator ...
Read MoreHow to Validate Mobile Number Length in ReactJS?
Nowadays, validation of mobile number input is a required feature for any application, and it requires validation of the length of the mobile number. Many apps use the mobile number for authentication purposes, sending OTP to users' mobile numbers for successful authentication. If the user enters the wrong mobile number, the app can face issues with sending OTP. So, before the user submits the mobile number for registration or authenticates the app, our app should validate the length of the mobile number. This tutorial will teach us various approaches to validating a mobile number using ReactJs. ...
Read MoreHow to Randomly Change Image Color using HTML CSS and JavaScript ?
In this tutorial, we will explore two approaches to randomly change image color using HTML, CSS and JavaScript. We'll use CSS blend modes and background color techniques to create dynamic color effects. Approach 1: Using Math.random() with CSS Mix-Blend-Mode This approach uses the CSS mix-blend-mode property combined with a colored overlay to change the image appearance. We'll generate random RGB colors using JavaScript's Math.random() function. How It Works The mix-blend-mode: hue property blends the background color of an overlay div with the underlying image, creating a color-tinted effect. When we change the overlay's background color randomly, ...
Read MoreHow to Catch a ReferenceError with onerror?
JavaScript's onerror event provides a global way to catch errors, including ReferenceErrors, that occur during script execution. This is particularly useful for handling errors that might not be caught by traditional try-catch blocks. What is ReferenceError? A ReferenceError occurs when trying to access a variable or object that doesn't exist. This commonly happens with misspelled variable names or accessing variables before they're declared. Example of ReferenceError try { ...
Read MoreHow to Change a Button Text on Click Using LocalStorage in Javascript?
JavaScript provides powerful tools to create interactive web pages. In this article, we'll learn how to change a button's text when clicked and persist that change using localStorage, so the new text remains even after refreshing the page. What is localStorage? The localStorage is a read-only property of the window interface that allows you to store data permanently in the user's browser. Unlike sessionStorage, data stored in localStorage persists even when the browser session ends, making it perfect for remembering user preferences. localStorage Methods localStorage provides two essential methods for data manipulation: Getting Data ...
Read MoreHow to filter nested objects in JavaScript?
Filtering nested objects in JavaScript is a common task when working with complex data structures. Nested objects contain objects as values within their properties, and JavaScript's filter() method allows us to filter arrays of such objects based on conditions that access nested properties. Understanding Nested Objects A nested object is an object that contains other objects as property values. For example, a product object might have a nested price object: const product = { id: 1, name: "Laptop", price: { ...
Read MoreHow to find average color of an image using JavaScript?
Finding the average color of an image involves extracting pixel data from the image and calculating the mean RGB values. JavaScript's Canvas API provides the tools needed to access and analyze image pixel data. How It Works The process involves drawing an image onto a canvas element, extracting pixel data using getImageData(), and calculating the average of all red, green, and blue values. The canvas element allows us to manipulate image data at the pixel level. Basic Syntax const canvas = document.createElement("canvas"); const context = canvas.getContext("2d"); context.drawImage(imageElement, 0, 0); const imageData = context.getImageData(0, 0, width, ...
Read More