Posts

Solution To calculate age from date of birth in React, you can use moment library diff() method. You have to use just like it currentDate.diff(dobDate, 'years') and it will return differance year between currentDate and dobDate. Snippet In this snippet, we will create take current date and date of birth date. Apply moment library diff() method with years parameter to get differance year. // Get the current date let currentDate = moment(new Date()); // Get date of birth date let dobDate = moment(new Date('1999-12-31')); // get no of year let year = currentDate....

Solution To add days in date in React, you can use date setDate() method it will add days as per your desired number. new Date().setDate() The setDate() method changes the day of the month of a given Date instance, based on local time. new Date().getDate() The getDate() method returns the day of the month for the specified date according to local time. Snippet In this snippet, we will create a date object and add 3 days in date....

Solution To display the date in React, we have the following ways Using the toString() Method, it will convert the date object into a string and print it in the UI. Using the toLocaleDateString() method, it will convert the date object into a string with a format in US style. Using the toDateString() method, it will convert the date object into a string formatted. Using the moment method, will allow the format date in your desired format....

Solution To compare two dates in React, you can use the JavaScript Date object with the getTime() method, and use the comparison operator to compare dates. Snippet In this snippet, we will create two date object with getTime() method, use comparison operator, and print the which date is earlier and letter. const date1 = new Date('2022-12-15'); const date2 = new Date('2022-12-16'); if (date1.getTime() < date2.getTime()) { console.log("date1 is earlier than date2"); } else if (date1....

Method 1: Using toLocaleDateString() Solution To get the current date without time in react js, you can use the .toLocaleDateString() function which can have the power to format date based on the country and much more. Snippet In this snippet, we will see multiple short example of using toLocaleDateString() to get date without time. const date = new Date(); // Convert the date to a string in the desired format const dateString1 = date....

To check all checkboxes in a React component, you can use the .map() method to loop over the checkbox elements and set the checked property to true. Here is an example: App.js import React from "react"; export default class MyComponent extends React.Component { constructor(props) { super(props); this.state = { checkboxes: [ { id: 1, label: "Checkbox 1", checked: false }, { id: 2, label: "Checkbox 2", checked: false }, { id: 3, label: "Checkbox 3", checked: false } ] }; } checkAll() { const newCheckboxes = this....

Solution To download a zip file in React, you can use the a anchor tag with download attribute. So if some one click on link browser will download the file. Snippet In this snippet, we will see sample code of anchor tag which will help you download the file. <a href={this.state.zipUrl} download> Download zip </a> Example In this example, we will create download link for downloading zip file in react js....

Solution To check empty array in react js, use array.length property and compare with 0 if length equal to zero it’s means array is empty. array.length The length property of an Array object represents the number of elements in that array. The value of the length property is a non-negative integer with a value less than 232. Snippet In this snippet, we will create an array and use the array.length property, compare with zero and to show the message if array is empty in UI....

Solution To declare const array in react js, use const keyword to define constant array, and import anyware you want to use. const The const declaration creates block-scoped constants, much like variables declared using the let keyword. The value of a constant can’t be changed through reassignment. Snippet In this snippet, we will create an array and as constant and console it in logs. const arr = ["aGuideHub", "SortoutCode", "ReactJsSnippet", "Infinitbility"]; console....

Solution To add an object to an array in react js, use the push() method it will add new objects at the end of array. You have to just pass your object into push method. push() Method The push() method adds one or more elements to the end of an array and returns the new length of the array. Snippet In this snippet, we will see short example to add object into an array using push() method....

Solution To update an array in the state in react js, each time you have to initiate a new array with previous array data then the array will update correctly and render component. To create a new array with previous data we will use an array with a spread operator. like this [...arr] Spread operator The Spread operator have lot’s of benfits but we are using Spread operator to assign previous array data in new array without their referance....

Solution To add multiple objects in array in react js, use the push() method with multiple object, it will add all new objects at the end of array. You have to just pass your object into push method. push() Method The push() method adds one or more elements to the end of an array and returns the new length of the array. Snippet In this snippet, we will see short example to add multiple objects into an array using push() method....

Solution To add multiple values in array in react js, use the push() method with multiple param, it will add new elements at the end of array. You have to just pass your value into push method. push() Method The push() method adds one or more elements to the end of an array and returns the new length of the array. Snippet In this snippet, we will see short example to add multiple items into an array using push() method....

Solution To add an array to an array in react js, use the push() method it will add new arrays at the end of array. You have to just pass your array into push method. push() Method The push() method adds one or more elements to the end of an array and returns the new length of the array. Snippet In this snippet, we will see short example to add array into an array using push() method....

Solution To add elements into an array in react js, use the push() method it will add new elements at the end of array. You have to just pass your value into push method. push() Method The push() method adds one or more elements to the end of an array and returns the new length of the array. Snippet In this snippet, we will see short example to add element into an array using push() method....

Solution To check whether bootstrap is the version in react js, we have to check how many ways have to install bootstrap in react. we are going to check all the below ways of installation and check their versions. Using NPM or yarn Using CDN Link So one by one, we will go will the following ways and check their installation steps after how to identify the version. Using NPM or yarn Most of the time, developers use NPM to install bootstrap in their projects and it is the best way to install and uninstall bootstrap....

Solution To check hidden input field is empty or not in react js, store the hidden input value in state and check when you want. Here, we will do a sample example to check, clear, and store value in hidden input in react js. Snippet In this snippet, we will see how we are changing the state of hidden input. const [str, setStr] = useState(""); const StoreDataIntoHiddenInput = () => { setStr("token"); }; const ClearHiddenInput = () => { setStr(""); }; const CheckHiddenInput = () => { alert(str ?...

Solution To check if a string contains a substring in react js, use the includes() method it will return true if substring got in string. Snippet In this snippet section, we will see an example of checking string contain a substring in react. const str = "ReactJsSnippet"; console.log(str.includes('Snippet')) // true Example In this example, we will check string contain substring or not and print in console and page. Let’s start coding…...

Solution To check string contains special characters in react js, use the this regex /[`!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/ with test() method it will return true if string got in special char. Snippet In this snippet section, we will see an example of checking string contains special characters or not in react. const specialChars = /[`!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/; const str = "ReactJs@Snippet"; console.log(specialChars.test(str)) // true Example In this example, we will check string contain special characters or not and print in console and page....

Solution To check whether bootstrap is installed or not in react js, we have to check how many ways have to install bootstrap in react. we are going to check all the below ways of installation. Using NPM or yarn Using CDN Link So one by one, we will go will the following ways and check their installation steps after how to identify if it’s installed and then how to uninstall it....