the problem is that when ever in focusing the password input the button show up but when i try to click the button its lose the focus on the input and then the button disappear. <div className=’input-wrapper’> <input onFocus={() => setShowButton(true)} onBlur={() => setShowButton(false)} title=’password’ type={ type === ‘password’ && toggle ? "text" : "password"… Read More How to handle button inside input on focus?
when I try to fetch data from the server, I have 4 data responses in my web console instead of 1. This is my code export default function SelectTableComponent() { const { data, isLoading, error } = useFetchCaseStudy(); console.log(data); return ( <div className="container"> {isLoading && <div>A moment please…</div>} {error && ( <div>{`There is a problem… Read More Too many rerenders when I use fetch hook
I have this pattern of importing the useMediaQuery and useTheme hook from MUI and then storing them in variables in each component that needs it. I would like to store the logic somewhere else and just import isMobile to the components that need it, should I create a custom hook or pass isMobile around using… Read More What's the best way to clean up this logic so that I don't have to keep redeclaring a variable?
This component with map method is giving me an error that says Rendered fewer hooks than expected, only when I am filtering, i don’t quite get, any help would much appreciated. I know usually, The error "Rendered fewer hooks than expected" in a React component typically occurs when the order of hooks or the number… Read More Uncaught Error: Rendered fewer hooks than expected
I have a custom checkbox group input that is build using antd in react(Typescript). This is in a div whose state (visibility) is controlled using a state, and is shown on the click of a button. I need an event listener that will modify the state when a click is registered outside this state so… Read More create a div that has a state changed when a click is registered outside it
I am building an react app and want to save multiple photos to firestore to do that i want to take their url in imageurl: [] an array to save them in firestore. const [data, setData] = useState({ name: "", phone: "", location: "", imageurl:[], }) here every data is saving and working fine name,phone,location… Read More How to add data in an array inside object reactjs
I just started learning about hooks, and I’m curious how I can access a recently updated state? See code below. const [name, setName] = useState(‘jimothy’); function handleClick() { setName(() => ‘timothy’); console.log(name); consoleName(); } function consoleName() { console.log(name); } I have the function handleClick() attached to a button. Both consoles in this circumstance, on the… Read More How to use/access recently updated state, using React Hooks
i want to add new links every time i click on button i use first useState like this : const [links, setLinks] = useState([ { number: 1, platforms: null, url: null, }, ]); then handleClick function every time i click on button : const handleclick = () => { let addLinks = links; const newLink… Read More when i click to the button the state change but the render still the same
Here is my code: I am trying to connect to supabase and i am getting a console 400 error twice but then it connects. It is due to userId variable, if i put the userId string i do not get the error. userId is being updated in a function just above this useEffect. useEffect(() =>… Read More React useEffect issue… variable inside async function is getting a delayed updated value
I am new to react. I created an array of items with each switch element, the problem is: when I click on one item all items are activated at once! const dashboardItems = ["news", "notifications", "letters"]; const Settings = (props) => { const { t } = useTranslation("settings"); const [isActive, setIsActive] = useState(false); const handleClick… Read More Targeting one item in an Array ( React, useState)