Let’s say there are 10 input field data. They are required to persist across 3 pages such as form page, preview page and confirmation page. So I guess the data would definitely to sit in Redux as global data for the 3 pages. Normally, I would create 10 useState hooks in the form page to store the 10 data/states and
Tag: react-hooks
Returning value from React child component
I am beginner in React so I apologize if this is a basic question. I am trying to build an online Sudoku grid using ReactJS but I am unable to render the digits in the field. I have made two components one being the Sudoku.js which renders the complete sudoku block and other being Node.js which consists of an input
How to use a custom React hook to make a POST or DELETE request with Axios
I am trying to make a generic useAxios hook in React. I would like to be able to import this hook into other components to make Get, Post, and Delete requests. I have created the hook and it works fine for making Get requests, but I am stuck on how to make it work for Post/Delete requests. The issue is
Rewriting React router v4 class based code to v6 functional based
I’m trying to implement oauh login with react and spring boot and I’ve found a tutorial I can follow. The issue I have is that it is using React Router v4, I would like to update it to use React Router v6 and using Functional components instead. Login.js App.js This is the App.js with the routes, I have updated it
How to dynamically create multiple alerts inside mui v5 Snackbar
I am calling an API to do few actions. I want to take the response of each action and show it inside Snackbar/alert. I am able to show only the first response and nothing else even after iterating the messages in a map. Here is my business logic calling the api setNotify will open the Snackbar with the alerts The
Adding object values to useMemo hook for React
I am attempting to create a react-table component using data that is pulled from a database. From the documentation I have read (https://react-table.tanstack.com/docs/quick-start), it seems like the react-table library uses a useMemo hook to create the data which will be displayed on the table. However, I am having trouble actually adding data to the useMemo hook, since I am not
Multiple Calls to Custom Hook not yielding expected result
I am having a hard time understanding why the onClick event handler (which invokes 2 calls to a custom hook wrapper function) is not responding properly. I expect that everytime I click the button in the example would swap its border color from green to red based on a value that is being incremented. I understand the example is rudimentary
Changing object in an array does not trigger change in html React
The object I want to edit gets edited in JSON format, but only previous data gets displayed in the browser. I use these hooks to get a list of products from local storage Then I map all of the objects incrementAmount() function looks like that: From what I see in the console, the array looks fine and the object I
How to stop page refresh when function is called – React
I am trying to call a function to fetch data from an api and display the data. However when I call this function, the page refreshes and state is reset so the page doesn’t display anything. In a child component, I have an input box and a form. OnSubmit, this form will save input to state (listOfNames) in the parent
|React:useOutsideClick hook gives forwardRef warning message
From firebase I fetch data and map this data to be shown in cards, every card has edit component and CardComponent(edit component parent) which use ref provided from useHandleOpen custom hook Error message: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? Component where ref is in use Card component