Posts

Solution To check if the page is refreshed in react js, use the window.performance.navigation method if it will contain reload navigation entries it means the page is refreshed. window.performance.navigation The navigation read-only property of the Window interface returns the current window’s associated Navigation object. Snippet In this snippet, we will note important parts checking reloaded pages. const pageAccessedByReload = ( (window.performance.navigation && window.performance.navigation.type === 1) || window.performance .getEntriesByType('navigation') .map((nav) => nav....

Solution To get yesterday’s date in React, you can use JavaScript’s built-in Date object. First, create a Date object for the current date and time using the new Date() constructor. Then, use the setDate() method to subtract one day from the date. This method takes the number of days to add or subtract as an argument, so to subtract one day you can pass in -1. Here is an example of how to do this:...

Solution To remove data from sessionstorage in react js, use sessionStorage.removeItem() method it will delete the key and value from sessionstorage. sessionStorage.removeItem() The removeItem() method of the Storage interface, when passed a key name, will remove that key from the given Storage object if it exists. Snippet In this snippet, we will delete the key and value sessionstorage using sessionStorage.removeItem() method. sessionStorage.removeItem('bgcolor'); Example In this example, we will store some values in local storage and then use the sessionStorage....

Solution To store an object in sessionstorage in react js, use sessionStorage.setItem() with the JSON.stringify() method it will convert an object into a string and store it in sessionstorage. sessionStorage.setItem() The setItem() method of the Storage interface, when passed a key name and value, will add that key to the given Storage object, or update that key’s value if it already exists. JSON.stringify() The JSON.stringify() method converts a JavaScript value to a JSON string, optionally replacing values if a replacer function is specified or optionally including only the specified properties if a replacer array is specified....

Solution To use sessionstorage in react js functional component, you have to use sessionstorage with react hooks depending upon the situation. Snippet In this snippet, we will use react hooks with sessionstorage for the following points. Get data from sessionstorage when the component load Store data on sessionstorage when the component load Store data on sessionstorage when a state change Get data from sessionstorage when the component load On a load of components, sometimes we need to fetch data from local storage and store it in a state to show in the UI....

Solution To clear sessionstorage in react js, use sessionStorage.clear() method it will delete all keys and values from sessionstorage. sessionStorage.clear() The clear() method of the Storage interface clears all keys stored in a given Storage object. Snippet In this snippet, we will clear all keys sessionstorage using sessionStorage.clear() method. sessionStorage.clear(); Example In this example, we will store some values in sessionstorage after then use sessionStorage.clear() method to delete all values....

Solution To store array in sessionstorage in react js, use sessionStorage.setItem() with JSON.stringify() method it will convert array into string and store in sessionstorage. sessionStorage.setItem() The setItem() method of the Storage interface, when passed a key name and value, will add that key to the given Storage object, or update that key’s value if it already exists. JSON.stringify() The JSON.stringify() method converts a JavaScript value to a JSON string, optionally replacing values if a replacer function is specified or optionally including only the specified properties if a replacer array is specified....

Solution To get data from sessionstorage in react js, use sessionStorage.getItem() method it will return stored value from sessionstorage. sessionStorage.getItem() The getItem() method of the Storage interface, when passed a key name, will return that key’s value, or null if the key does not exist, in the given Storage object. Snippet In this snippet, we will get some value from localstorage using sessionStorage.getItem() method. const token = sessionStorage.getItem("access_token"); console.log(token); // dXNlckBleGFtcGxlLmNvbTpzZWNyZXQ= Example In this example, we will get token from sessionstorage and show in the console and page....

Solution To get json from sessionstorage in react js, use sessionStorage.getItem() method it will return JSON string then use JSON.parse() method to convert it into Object. sessionStorage.getItem() The getItem() method of the Storage interface, when passed a key name, will return that key’s value, or null if the key does not exist, in the given Storage object. Snippet In this snippet, we will get some JSON value from sessionstorage using sessionStorage....

Solution To check string exists in an array in react js, use the includes() method for an array of string, or number and the findIndex() method for an array of objects. Snippet In this snippet, we will see the implementation of the includes() and findIndex() methods. Check string exists in an array of string, numbers, and boolean. const arr = ["aGuideHub", "SortoutCode", "Infinitbility"]; arr.includes('aGuideHub'); // true arr.includes('Hello'); // false Check string exists in an array of objects const arr = [ { id: 1, name: "aGuideHub" }, { id: 2, name: "SortoutCode" }, { id: 3, name: "Infinitbility" }, ] let index = arr....

Solution To get the current month in react js, use the new Date().getFullYear() it will return the current year. getFullYear() The getFullYear() method returns the year of the specified date according to local time. Snippet In this snippet, we will create a date object and get a current year from it. const date = new Date(); let year = date.getFullYear(); // 2022 ( Sample Output ) Example In this example, we will show the current year in the console and page in react js....

Solution To remove the horizontal scrollbar in react js, use overflow-x: hidden; it will hide the horizontal scrollbar where you have mentioned. Snippet In this snippet, we will see a sample of removing the horizontal scrollbar in react js using css. body { overflow-x: hidden; /* Hide horizontal scrollbar */ } Example In this example, we will create a page with a horizontal scrollbar and then use overflow-x css to hide it....

Solution To remove the vertical scrollbar in react js, use overflow-y: hidden; it will hide the vertical scrollbar where you have mentioned. Note: The overflow-y: hidden; also removes the scrollbar’s functionality. It is not possible to scroll inside the page. Snippet In this snippet, we will see a sample of removing the vertical scrollbar in react js using css. Remove the vertical scrollbar body { overflow-y: hidden; /* Hide vertical scrollbar */ } Remove the vertical scrollbar and keep scrollable /* For Chrome, Safari, and Opera */ body::-webkit-scrollbar { display: none; } /* For Firefox, IE and Edge */ body { -ms-overflow-style: none; scrollbar-width: none; } Example In this example, we will create a page with vertical scrollbar and then use overflow-y css to hide it with scrollable....

Solution To get the last letter of a string in react js, use the string index method it means when you use string[string.length - 1] it will return the last letter of the string. Snippet In this snippet section, we will see an example of getting the last letter of a string program sample. const str = "ReactJsSnippet"; console.log(str[str.length - 1]) // t Example In this example, we will get and show the last letter of the string in the console and page....

Solution To get length of string in react js, use string.length property it will count and return number of char of string. string.length The length property of an String object represents the number of letter in that string. 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 string and use the string.length property to show the length of string....

Solution To add an active class on click in react js, use conditional rendering based on the condition we can able to toggle or change any class in the react js. In this article, we will create a clickable button and when users click on the button will change the background color of the button. Snippet In this snippet section, we will show those codes which are playing important role in this example....

Solution To get the first letter of a string in react js, use the string index method it means when you use string[0] it will return the first letter of the string. Snippet In this snippet section, we will see an example of getting the first letter of a string program sample. const str = "ReactJsSnippet"; console.log(str[0]) // R Example In this example, we will get and show the first letter of the string in the console and page....

Solution To add active class dynamically in react js, use conditional rendering based on the condition we can able to toggle active class in the list. In this article, we will create a clickable menu and when users click on any menu will show their sub-menu. Snippet In this snippet section, we will show those codes which are playing important role in this example. Menu Conditional Rendering Here, we are rendering menus dynamically from the array and if the array contains isActive - true then we are adding an active class for those menus....

Solution To remove data from localstorage in react js, use localStorage.removeItem() method it will delete the key and value from localstorage. localStorage.removeItem() The removeItem() method of the Storage interface, when passed a key name, will remove that key from the given Storage object if it exists. Snippet In this snippet, we will delete the key and value localstorage using localStorage.removeItem() method. localStorage.removeItem('bgcolor'); Example In this example, we will store some values in local storage and then use the localStorage....

Solution To store an object in localstorage in react js, use localStorage.setItem() with the JSON.stringify() method it will convert an object into a string and store it in localstorage. localStorage.setItem() The setItem() method of the Storage interface, when passed a key name and value, will add that key to the given Storage object, or update that key’s value if it already exists. JSON.stringify() The JSON.stringify() method converts a JavaScript value to a JSON string, optionally replacing values if a replacer function is specified or optionally including only the specified properties if a replacer array is specified....