I am building a form with react which has three fields: Make, Model and ZipCode. The zipcode field comes with a default value, so when I choose a make and a model and click the submit button, it should pull that make and model in the selected zipcode, however, the zipcode input field will tell me to enter a v…
Tag: reactjs
|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 Re…
Generating random array in reactjs
I’m trying to generate a specific size random array in reactjs everytime a user hits a button. The code to generate the array is the following: This code seems to work when I test it separately. I can call it how many times I want and it will still work. However when I use this function with a simple re…
On button click, how to add selected class and remove from all other buttons in React functional component?
I am currently learning React and I have a functional component for a menu. When a value is clicked I want to add the ‘choice-selected’ class to visually show it has been selected and make sure no other button has the class. Is there a way to create this behavior without creating a separate useSta…
Styling pseudo element when its immediate parent is also repeating
Code : I am working on react project where I am looping through an array and creating dynamic div list. That div is further divided into two parts using display:flex. Left side of that flex I want circle and bar which connects another circle and creating chain ( timeline kind of thing). I want to hide line cr…
How to pass a custom style to MUI V5 styled component?
Using MUI V5, how can I pass a custom style to a button component? Here is what I have been trying to merge the old way with the new MUI v5 but it’s not working. Now I would like to call this Button and give it color=”secondary” Answer It looks like your code was an attempt to migrate from c…
React: Selecting an element by id prints the wrong element
Hello! So, I am working on this list in react, when I add two elements to my list, and remove the first one added, it prints the other element that is left in the list. Is this normal? the ‘id’ is applied on creation of the list element and contains the title + unique ID applied to the object. Not
How to pass the object to action in slice?
I need to pass userId and userNickname to action authUser in authSlice reducer. authSlice: calling dispatcher Answer Simply dispatch(authUser({ userId, userNickname })); which is equivalent to dispatch(authUser({ userId: userId, userNickname: userNickname }));
(react router v6) “Error: useNavigate() may be used only in the context of a component” error in hoc component
In the Router section, I try to check whether the user has access to the component using the higher order component (hoc). Therefore, check whether the user is logged in at the hoc. At this time, an attempt to access each page may be prevented or forced to move to another page according to the response value.…
React MUI Datagrid align column data and header with type “number”
I’m using MUI in my react project. When I set the type of a column to type: “number” the column header and data align to the right. I reproduced the issue at the simple example from MUI documentation: codesandbox The third column age has type: “number” and everything alignes to t…