Search code examples
reactjsgetelementbyid

Using REACT to read values from elements using Id (getElementsById("myField"))

Edited original post: Skipping all the back story and why it is so, I have an auto generated HTML form with elements that have a consistent Id, but not Name attributes. Eg:

<textarea name="something_random_12345677890_always_changes" rows="10" cols="20" maxlength="1000" id="new_myField">
    Contents of the text area here
</textarea>

I'd ideally use something like this in REACT if only document.getElementById("new_myField") was available, but that always returns a NULL and does not find the element.

    const myInputField = document.getElementById("new_myField");

Is there a way to reference my element by Id?

I've seen some other posts relating to this issue including using "useEffect" but their scenario is slightly different and I'm too novice to work out how to fit it into my scenario.

Here's the full code as how I understood it from #RedFlash. But maybe I've implemented it incorrectly?

import { useEffect } from 'react';

function App() {

  function Getnew_myField() {
    useEffect(() => {
      const ddf_formconfigurationjson = document.getElementById('new_myField');
      if (ddf_formconfigurationjson[0]?.value) {
        alert("new_myField: " + ddf_formconfigurationjson[0].value);
      } else {
        alert("new_myField does not exist");
      }
    }, [])
  }


  function ConfigReady(event) {
    Getnew_myField();
    
    //This always returns null
    //const new_myField = document.getElementById("new_myField");
    //if (new_myField[0]?.value) {
    //  alert("new_myField: " + new_myField[0].value);
    //} else {
    //  alert("new_myField does not exist");
    //}
  }

  return (
    <div>
      <form>
        <textarea name="something_random_12345677890_always_changes"
          rows="10"
          cols="20"
          maxlength="1000"
          id='new_myField'>
          Contents of the text area here
        </textarea>

        <input
          name="ConfigReady"
          id="ConfigReady"
          type="checkbox"
          onChange={ConfigReady}
        />
      </form>
    </div>
  );


}

export default App;

It's throwing an error:

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
Solution

  • I've eventually solved it in a different way. I'm using JQuery to access the DOM.

    To add JQuery functionality to the app I installed it first:

    npm install jquery

    Then import it:

    import $ from 'jquery';

    Finally, able to use it to reference elements this way:

    const myVar = $('#new_myField').val();

    The above "new_myField" is the element ID.

    But just to complicate things... I tried using "document.getElementById(...)" in my code again just to confirm and suddenly it's working fine. The whole sample code in my problem is functioning now. I can only assume that installing the JQuery package did something?