Question 182503 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to find an element in JSX using useRef in React

In my webpage, there is a form that is loaded via an iframe.

I can access the iframe with a ref:

const formRef = useRef(null)

<FormIframe ref={formRef} />

The iframe will return a bunch of JSX, and inside there, I know that there is an element that has the id of "first_name"

<input id="first_name" />

How do I access that element using the ref so that I can do stuff with it? The following does NOT work:

const el = formRef?.current?.getElementById("first_name")

I also tried using document with getElementById in a useEffect but that also didn’t work. It returned null:

useEffect(() => {
  if (document) {
    const el = document.getElementById("first_name")
    console.log(el)
  }
}, [])

Any ideas?

Tags:

3

Answers


  1. 0

    You can access it as:

     const iframeElement = formRef.current;
 const iframeWindow = iframeElement.contentWindow;
 const elementInIframe = iframeWindow.document.getElementById('first_name');
    Login or Signup to reply.
  2. 0

    your problem is that your form is in a iframe.

    When working with an iframe, accessing elements inside it can be a bit different from accessing elements in the main document. In your case, since you have a reference (formRef) to the iframe, you can use the contentWindow property to access the document inside the iframe and then retrieve the element by its ID. Here’s how you can modify your code to achieve that:

    const el = formRef?.current?.contentWindow?.document.getElementById("first_name");

    Also can you look at
    get iframe elements in react using ref
    React – Accessing inline created iframe elements

    The same idea is related.

    Login or Signup to reply.
  3. 0

    Import the useRef hook from the React package at the top of your component file:

    import React, { useRef } from 'react';

    Inside your functional component, declare a ref variable using the useRef hook:

    const myRef = useRef();

    Assign the ref to the JSX element you want to reference using the ref attribute:

    <div ref={myRef}>This is the element I want to find</div>

    You can now access the referenced element using the current property of the ref:

    const element = myRef.current;

    Here’s an example that demonstrates these steps:

    import React, { useRef } from 'react';

function MyComponent() {
  const myRef = useRef();

  const handleClick = () => {
    const element = myRef.current;
    if (element) {
      // Access or manipulate the element here
      console.log(element.textContent);
    }
  };

  return (
    <div>
      <div ref={myRef}>This is the element I want to find</div>
      <button onClick={handleClick}>Find Element</button>
    </div>
  );
}

    In the above example, myRef is used to reference the element. When the button is clicked, the handleClick function is triggered, and it logs the text content of the referenced element to the console.

    Remember to check if the ref.current value is not null before accessing or manipulating the referenced element, as it will initially be null until the component is rendered and the ref is assigned.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search