React forwardRef for function component

Question

I have this interface:

export interface INTERFACE1{
  name?: string;
  label?: string;
}

and then this function component:

export function FUNCTION1({
  name,
  label
}: INTERFACE1) {
  return (
    <CustomComponent name={name} label={label} />
  );
}

my goal is to access this CustomComponent from another component. I tried adding ref: React.createRef<any> inside the interface but it didn't click in. From my research, it seems that I need to use forwardRef but most of the online examples don't seem to work. Any ideas how can I reference my CustomComponent from outside, from different component, like this?

import React, { useCallback, useEffect, useState, createRef } from 'react';
import { FUNCTION1 } from 'FUNCTION1';

interface INTERFACE2 {
  loading: boolean;
}

export default function FUNCTION2({
  loading
}: INTERFACE2) {
  const areaRef = createRef<HTMLTextAreaElement>();

  return (
    <>
          <FUNCTION1
            name="NAME"
            label="LABEL"
            ref={areaRef}
          />
    </>
  );
}

areaRef throws an error that I should use forwardRef.

What does it mean "access from another component", sounds like the XY problem. Please show a full example of what you trying to achieve, an example of you trying to "access" your component, and use it will be helpul. — Dennis Vash
– Dennis Vash, Commented Aug 25, 2021 at 9:10
I edited my question, I added an example how is my intention to access the component through ref from another component. @DennisVash — anthino12
– anthino12, Commented Aug 25, 2021 at 9:17
Your example isn't clear enough. And what exactly are you trying to achieve. Trying to use ref might not be the appropriate way of doing that. — Joshua
– Joshua, Commented Aug 25, 2021 at 9:29

Dennis Vash · Accepted Answer · 2021-08-25 09:29:26Z

3

You don't really need a forwardRef here, please refer to: Why, exactly, do we need React.forwardRef?.

In your specific example:

Don't UPPER CASE your component name, its should only start with Capital
Pass your ref through any prop, see explanation in link above.
Use a hook useRef in function components, createRef is for classes.

function Foo2() {
  const areaRef = useRef();

  // Check ref
  useEffect(() => {
    console.log(areaRef.current);
  }, []);

  return <CustomComponent inneRef={areaRef} />;
}

function CustomComponent({ innerRef }) {
  return <textArea ref={innerRef} />;
}

answered Aug 25, 2021 at 9:29

Dennis Vash

54.2k12 gold badges120 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React forwardRef for function component

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related