Advertisements I’m new to React and NextJs. I want to get the height of an element and depending on its height, to show or not to show the More… button. What I’ve tried is this: import {useRef, useState} from "react"; const MyText = (props) => { const [myState, setMyState] = useState(null) const setContent = (e)… Read More Get the height of an element and show/hide More… button depending on the element's height

Advertisements I’ve built a draggable slider component inside one of my pages, which changes the state of the info on a form as the tab is dragged further along the screen (horizontal only) but as the position changes and I set state in order to change the info on this form, it causes my page… Read More How to avoid resetting my useRef when setting state inside a useEffect?

Advertisements I use useRef() to deal with errors of a phone number from an input. I do it like this: const errorPhoneDiv: MutableRefObject<{}> = useRef(""); A bit later in the code, I use errorPhoneDiv.current.innerText to set the written phone number, but TS tells me : Property ‘innerText’ does not exist on type ‘{}’ What type… Read More How to type a variable with useRef with TypeScript

Advertisements I am trying to use useRef to move items of a component at the click of a button. I have tried the following code: export const List: React.FC = () => { const listRef: any = useRef(null); const handleSliderClick = (direction: string) => { if (direction === "left") { console.log(listRef.current, "refff"); listRef.current.style.transform = `translateX(230px)`;… Read More How to use styling with useRef hook?

Advertisements I’m writing a React component that accepts some data as an array and renders them. However, I need to add some event listeners to it. The functions I’ll be passing to the event listeners should depend on the data. Basically, the rendered items and their behavior should be completely data-driven. I wrote this piece… Read More Adding event listeners using useRef inside a loop

Advertisements So the following code is an attempt to make two copies of a fetch request. One of them is for state and the other is being stored in as a ref. I can’t understand why the following snippet doesn’t do what I need to it to which is add the backgroundColor prop to the… Read More updating useRef is not working for some reason

Advertisements I am new to React. My issue is that I am trying to change the background color of a div that I dynamically render in React. To do this I learned about useRef() to single out the element. If I do a console.log() in the onHover function, the log works in the browser, but… Read More React useRef() not working onMouseOver to change backgroundColor of div

Advertisements I have div like that const indexRef = useRef(); <div className=’indexBx’ ref={indexRef}> <span className=’active’>01</span> <span className=’active’>02</span> <span className=’active’>03</span> </div> So now I want to change the secondary span classname via indexRef like something indexRef.current.span:nth(2).className = ??? How can I do that >Solution : // change class of second child indexRef.current.children[1].className = ‘passive’

Advertisements The error This is the error that shows in the brower over the webpage. Compiled with problems:X ERROR src\components\SignIn.js Line 5:21: React Hook "useRef" is called in function "signin" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names… Read More Why does the React hook useRef throw an error when used?