I am trying to use the MUI drawer component alongside with React router to display a simple navbar on the left of the page. I am very new to react and am not sure what I am doing wrong as the code compiles fine. The other two pages “Signup” and “Login” are showing up fine. The way the …
Tag: reactjs
Assigning input data into array from multiple input fields gives undefined
I’m trying to assign the input field values into an array. Input fields are text box and date picker, which can be changed and data can be set. While setting the data for text box and then for date gives undefined for the latter. If date is set first then text box value then text value is undefined. I&#…
How to know if the input is Email or username
I’m trying to let the user sign in using email OR username, I already implemented the backend and it’s working fine using Postman, but I didn’t know how to implement it in the frontend, Login.jsx: My question is how to let the INPUT knows if the user is typing a username or an email and then…
add border when mouse hovered on MUI v5 table row
I created a table with Material UI v5 and now when the mouse pointer hovered on the table row I want to add a blue border to the table row. I have tried a lot of ways and searched but I did not find any solution. this is what I made so far: codesandbox Answer You can check the online
Error in Firebasse”assert.ts:128 Uncaught FirebaseError: Firebase: Error (auth/invalid-api-key)
Why do I have the error that it says invalid API keys? This is the sample .env.local In another file: This is the error: The Package.json: Answer Make sure your .env.local is placed in the root directory, and not in any subfolders like src or public. Other than that, nothing seems to be wrong with your code. …
How to use useEffect Hook to execute the operation only once?
I wanted to make the modal popup if someone leaves the window. I tried the following code: The above code helped me but became annoying as it pops up every interval. I tried adding a new state to run the code only once: The above code also ran the same as the previous one i.e. every time the modal would
conditionnally render prop in html
Basically I am trying to set the closeModal prop when offline to true and else to closeModal. How do I achieve this ? I am using react-detect-offline and ant design. Answer
Working with RegEx, but I dont know how to approach my issue
^d{1,12}$|(?=^.{1,15}$)^d+.d{1,2}$ This is the expression I currently have. I want the max limit to be 100 000 000 000 with optional two decimals max, but if the user only adds 1 decimal, they can bump the value to 100 000 000 0001.1 if they want to. How can I approach this issue? and is there any way to make…
How to check which functional React Component has been viewed in the viewport latest?
My goal is to make it so I know which video the user has seen in the viewport latest. This was working until I turned the videos into functional React components, which I can’t figure out how to check the ref until after the inital render of the React parent. This is currently the top part of the compon…
Functional component not updating DOM when updating state with useState
EDIT: Codepen is here https://codepen.io/mark-kelly-the-looper/pen/abGBwzv I have a component that display “channels” and allows their minimum and maximum to be changed. An example of a channels array is: In my component, I send in the channels array as props, copy it to a channels object which us…