use-ref Questions

2

Solved

I am trying to use useEffect and useRef() to get the latest value of my counter as well as compare to the previous value so that I know if I need to call the addValues or removeValues function. I f...
Quittance asked 12/7, 2022 at 16:47

2

Solved

Task I'm trying to use React.forwardRef() and in the same time use React.useRef() in a component. Problem I can use either only myOwnRef or ref from forwardRef prop. So, I have no idea how to use t...
Papilionaceous asked 15/3, 2023 at 22:57

7

I have a scenario where I need to detect the first render of a component. Here I have build a small example. Could someone explain to me what is the correct approach? Why do most of the people sugg...
Fro asked 26/11, 2020 at 19:1

5

Solved

Good day, so I am trying to perform an intermediate function before a form action="POST" takes place. Ive tried two things firstly onSubmit={functionName} but the form always performs the...
Orthocephalic asked 21/7, 2020 at 13:47

4

Solved

Using React, i have a list of ref statically declared this way: let line1 = useRef(null); let line2 = useRef(null); let line3 = useRef(null); ... //IN MY RENDER PART <li ref={(el) => (l...
Barbarian asked 18/12, 2020 at 0:10

2

Solved

I am using React.useRef inside a react functional component, I am getting an error message before i was using it inside a class component and now i have changed it to a react functional component a...
Symbolist asked 1/3, 2020 at 21:57

2

I have a component contains iframe and I want to access its content in react, I used ref to handle the iframe, how can I get all anchors tags from the iframe here is my code : const GridGenerator ...
Coincide asked 22/6, 2020 at 19:11

2

Solved

I have a form that contains a number of input elements. I want to access the values of these inputs in the parent component. For this, I could use state but I am exploring the use of refs at the mo...
Armored asked 16/5, 2022 at 16:10

1

Solved

I have an app that pulls data from a GraphQL database and then .maps it into custom form components (quantity number textboxes). Right now, the components themselves are holding state of their indi...
Hateful asked 26/8, 2022 at 5:45

1

Solved

const textInputRef = useRef(); useEffect(() => { if (textInputRef && textInputRef.current) { textInputRef.current?.focus(); // property 'focus' does not exist on type 'never' } },...
Kasten asked 29/6, 2022 at 17:46

1

Solved

I'm trying to access a ref during clean up (before the component unmounts). Like so: const Comp = () => { const imgRef = React.useRef(); React.useEffect(() => { console.log('com...
Ludovika asked 21/4, 2022 at 2:21

1

In our react application, We have parent-child component. Child component calls parent method to update parent state values. Here is sample code //Parent component const parent = ({ items }) => ...
Gaultiero asked 11/4, 2022 at 15:41

3

Solved

i used react useRef in functional components to get link on html object and store it in Recoil atom. For example: const Children = () => { const [refLink, setSrefLink] = useRecoilState(refLink)...
Stouthearted asked 5/2, 2021 at 17:17

3

Solved

Outside of the counter example seen in many YouTube tutorial videos, what are practical/real-world use cases for useMemo and useCallback? Also, I've only seen an input focus example for the useRef ...
Spencer asked 1/3, 2021 at 20:29

1

Solved

I'm using react-slick-slider and what I want to achieve is to make custom arrows. So code looks like this: const FeedbackSlider = () => { const [isLargeScreen] = useMediaQuery("(min-width: ...
Egghead asked 22/6, 2021 at 6:54

2

Solved

The Code is written using React Functional components. Upon clicking button in parent, the function showAlert should be fired. That is the requirement. Currently in the parent component childRef.cu...
Mallorymallow asked 25/2, 2021 at 6:14

3

Solved

I am using ref to animate elements on scroll. const foo = () => { if (!ref.current) return; const rect = ref.current.getBoundingClientRect(); setAnimClass( rect.top >= 0 && rect....
Seaboard asked 22/1, 2021 at 5:56

3

Solved

I am confused about the below usage of useRef to store the previous state value. Essentially, how is it able to display the previous value correctly. Since the useEffect has a dependency on "v...
Twiddle asked 19/1, 2021 at 4:44

1

Solved

I have an input tag, when I press the escape key, I want the focus on the input element to go away, meaning there is no longer a text cursor or any focus styling(when the user types, their input wi...
Aciculate asked 15/1, 2021 at 16:38

1

Solved

I'm trying to control the play/pause state of a video using ref's in React.js, my code works but there are tslint errors I am trying to work through: function App() { const playVideo = (event:any)...
Schweiker asked 14/1, 2021 at 18:26

1

Solved

I am trying to use ref on a search input in my Header component which ISN'T a higher order component to my ResultsList component. I want to set focus on the Header's search input from the ResultsLi...
Tippet asked 2/12, 2020 at 20:33

2

Solved

EDIT: better explanation The context: I receive some plain HTML code from a 3rd server, which I want to insert in my React app modify it The vanilla JS approach I can modify the string wit...
Camelback asked 24/4, 2020 at 12:15
1

© 2022 - 2024 — McMap. All rights reserved.