Questions tagged [react-forwardref]
162 questions
36
votes
4 answers
Using forwardRef with proptypes and eslint
I am trying to use forwardRef for a Button in a project using eslint and prop-types.
This is what I tried so far, and the errors I get each time:
First attempt
function Button ({ action = { callback: () => {}, title: 'unknown' } }, ref) {
return…
Sharcoux
- 5,546
- 7
- 45
- 78
23
votes
1 answer
TypeError: Component is not a function on adding forwardRef
Hi I was trying to add forwardRef to a child component but getting the following on adding the forwardRef:
TypeError: Component is not a function
The component is defined as below:
import React from 'react';
import { forwardRef } from…
suvodipMondal
- 656
- 10
- 27
21
votes
2 answers
Understanding: Warning: Function components cannot be given refs
I know that refs are used to access DOM elements directly without altering the state. I read that it's not possible to give refs to function components because they don't have a state.
Refs cannot be attached to function components. Although, we…
devamat
- 2,293
- 6
- 27
- 50
18
votes
1 answer
Whats the difference between ForwardRefExoticComponent and ForwardRefRenderFunction in react?
I'm writing a React component which can forward ref to its chilren
I found out that for the return type of the function components, I can use ForwardRefExoticComponent and ForwardRefRenderFunction. But I'm not sure whats the difference between…
Jake Lam
- 3,254
- 3
- 25
- 44
17
votes
3 answers
React/Typescript forwardRef types for an element which returns either an input or textArea
I'm trying to create a generic text input component for our application using react and typescript. I want it to be able to either be an input element or a textarea element based on a given prop. So it looks somewhat like this:
import {TextArea,…
picklechips
- 746
- 2
- 8
- 28
11
votes
3 answers
How to check if a div is overflowing in react functional component
I am trying to find out if a div has overflown text and show show more link if it does. I found this stackoverflow answer to check if a div is overflowing. According to this answer, I need to implement a function which can access styles of the…
troglodyte07
- 3,598
- 10
- 42
- 66
10
votes
2 answers
React.forwardRef is already possible without it, so what's the use of it?
I'm confused on the point of React.forwardRef. As explained in its documentation, I understand that its main use is for a Parent Component to gain access to DOM elements of the Child Component. But I can already do that without even having to use…
Jordy
- 415
- 5
- 13
9
votes
1 answer
why do we need React forwardRef if we can simple pass the created ref in props?
The correct way of passing refs to child components as per react documentation is like this:
import React from 'react';
const Input = React.forwardRef((props, ref) => {
React.useEffect(() => {
ref.current.focus();
}, []);
return
Himmature
- 106
- 1
- 2
8
votes
4 answers
React forwardRef - access ref within component, and in parent
I need to access the ref to a textarea inside a component. Within the component, its easy enough:
const MyComponent = () => {
const inputRef = useRef();
return
}
Now the ref is available within MyComponent and I…
Seth Lutske
- 9,154
- 5
- 29
- 78
8
votes
1 answer
Mock forwardRef components jest mockImplementation with typescript
How are you suppose to handle mocking components in test files when the Component is wrapped in forwardRef? The mockImplementation is not on method, but instead is on a property render.
import React from 'react';
import Component from…
James Henderson
- 81
- 1
- 6
7
votes
1 answer
What does forwardRef by a component in React dev tools mean and how can I use it?
When I inspect component structure in React dev tools, I can see that there is a forwardRef mark. I am perplexed because there is no sign of it being used in the source code. How is it that it is there and how can I use it?
bakrall
- 465
- 7
- 21
4
votes
1 answer
How to use React.forwardRef() with own ref in the component?
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 them together.
Example code:
interface…
Владимир Говоров
- 75
- 6
4
votes
2 answers
React ForwardRef: Property 'current' does not exist on type 'ForwardedRef'
I am trying to create a component that will track the vertical scroll. The catch is – the actual scroll container is not easily predictable (in this specific case it is neither window, document nor body – it is div#__next, due to CSS overflow…
HynekS
- 2,738
- 1
- 19
- 34
4
votes
4 answers
React TypeScript type hint auto-completion does not work with React.forwardRef in Visual Studio Code
For normal React components, I can see the correct auto-completion for component's props like this:
But I try to create a component with React.forwardRef like below, it does not work, any idea?
export default React.forwardRef
sunkehappy
- 8,970
- 5
- 44
- 65
4
votes
3 answers
React - using forwardRef in component, typescript error - Property 'current' is missing
I'm struggling to understand why the typescript compiler is unhappy with the forwardRef I'm using in a component.
I've pared my code right down to the bare essentials for the example below, ensuring this typescript error is the only one that…
Matthew Trow
- 2,712
- 1
- 17
- 15