Posts

Solution To use localstorage in react js functional component, you have to use localstorage with react hooks depending upon the situation. Snippet In this snippet, we will use react hooks with localstorage for the following points. Get data from localstorage when the component load Store data on localstorage when the component load Store data on localstorage when a state change Get data from localstorage 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 localstorage in react js, use localStorage.clear() method it will delete all keys and values from localstorage. localStorage.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 localstorage using localStorage.clear() method. localStorage.clear(); Example In this example, we will store some values in localstorage after then use localStorage.clear() method to delete all values....

Solution To store array in localstorage in react js, use localStorage.setItem() with JSON.stringify() method it will convert array into string and store 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....

Solution To get data from localstorage in react js, use localStorage.getItem() method it will return stored value from localStorage. localStorage.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 localStorage.getItem() method. const token = localStorage.getItem("access_token"); console.log(token); // dXNlckBleGFtcGxlLmNvbTpzZWNyZXQ= Example In this example, we will get token from localstorage and show in the console and page....

Solution To get json from localstorage in react js, use localStorage.getItem() method it will return JSON string then use JSON.parse() method to convert it into Object. localStorage.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 localstorage using localStorage....

Solution To get current month in react js, use the new Date().getMonth() it will return 0 to 11 number, where 0 is January and 11 is December. To get current month name in react js, use new Intl.DateTimeFormat("en-US", { month: "long" }).format(date) method it will return month name and you don’t have to install any package for it. getMonth() The getMonth() method returns the month in the specified date according to local time, as a zero-based value (where zero indicates the first month of the year)....

Solution To get the index of an array element in react js, use the findIndex() method and pass your value it will search, and if the value match with any array element it will return the index of the element. findIndex() The findIndex() method returns the index of the first element in an array that satisfies the provided testing function. If no elements satisfy the testing function, -1 is returned....

Solution To get length of array in react js, use array.length property it will count and return number of element of array. 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 to show the length of array....

Solution To get length of object in react js, first convert it into in array then use array.length property it will count and return number of elements have in object. To convert object to array we will use Object.keys() method which will create array of keys have in object. Object.keys() The Object.keys() returns an array whose elements are strings corresponding to the enumerable properties found directly upon object. array.length The length property of an Array object represents the number of elements in that array....

Solution To remove first element from array in react js, use array.shift() method it will remove the first element of the array. shift() The shift() method removes the element at the zeroth index and shifts the values at consecutive indexes down, then returns the removed value. If the length property is 0, undefined is returned. Snippet In this snippet, we will create an array and use the shift() method method to remove the first element of array....

Solution To remove last element from array in react js, use array.pop() method it will remove the last element of the array. pop() The pop() method removes the last element from an array and returns that value to the caller. If you call pop() on an empty array, it returns undefined. Snippet In this snippet, we will create an array and use the pop() method method to remove the last element of array....

Solution To get the first element of the array in react js, use the array index method. In the array index method, we can access the first element of the array by just passing 0 in the array variable like this array[0]. Snippet In this snippet, we will create an array and use the array index method to get the first element. const arr = ["aguidehub", "infinitbility", "sortoutcode"]; const firstElement = arr[0]; console....

Solution To get the first element of the object in react js, create an array of keys using the Object.keys() method, get the first key of an object by passing 0 in your array of keys, then use your first key to access the first value of your object. Snippet In this snippet, we will create an object and use the above solution to get the first element of the object....

Solution To get the last element of the array in react js, use the array index method. In the array index method, we can access the last element of the array by just passing the array.length - 1in array variable like thisarray[array.length - 1]`. Snippet In this snippet, we will create an array and use the array index method to get the last element. const arr = ["aguidehub", "infinitbility", "sortoutcode"]; const lastElement = arr[arr....

Solution To get the last element of the object in react js, create an array of keys using the Object.keys() method, and get the last key of an object by passing objKeys.length - 1 in your array of keys, then use your last key to access the last value of your object. Snippet In this snippet, we will create an object and use the above solution to get the last element of the object....