Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

How to obtain a component ref in a function component?

Open
#240 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
25/100
Issue type
Documentation
Clarity
Needs clarification
Activity status
Stale
Tech stack
fsharp, react
Domain
frontend

Research direction

The issue names no repository files or tests. Start by checking the useRef, FunctionComponent, and Props.RefValue approaches shown in the report, then verify what ReactXP Popup accepts as an anchor; done means documenting a supported approach or clearly stating whether a function component reference is available.

Written by the indexing model from the issue text.

Description

Hi,

I'm basically trying to figure out the equivalent of the following JS(X):

import { useRef } from 'react';

function MyComponent() {
  const componentRef = useRef(null);

  // Function to handle a button click
  function handleClick() {
    // Access the component using the ref object
    console.log(componentRef.current);
  }

  return (
    <div ref={componentRef}>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

That is, I need to obtain a reference to the ReactElement representing the component itself. Note that I am making an assumption that the above JS is actually correct and that componentRef is a reference to the component itself - I haven't actually verified this.

If I do the obvious thing:

FunctionComponent.Of<Props>(
        (fun props ->
            let rootHook = Hooks.useRef<Option<ReactElement>> = None

            let root = // create the root element, passing rootHook to things that need access to the component itself
				
            rootHook.current <- Some root
            root
        )

It doesn't work because I'm capturing a ReactElement rather than the component itself.

If I try to use a dom.div with Props.RefValue, it captures a browser element rather than a ReactElement (let alone the component).

So I'm unclear on how I obtain a reference to the component itself from within the implementation of a function component. In a class-based component, one would simply use this, but I can't use a class-based component.

Thanks

PS. In case you're wondering, my use case is I am trying to get a reference to the component to pass it to a ReactXP Popup as an anchor. The Popup needs to be anchored to the component that displays it.

Dominant language
F#
Stars
277
Forks
65
No merged PRs in 30d

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from fable-compiler/fable-react

All issues in fable-compiler/fable-react

Similar issues

More Web Dev issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.