带有 id 的声明元素并在同一个 JSX 中访问它

Question

I have dynamically created JSX and 1 element is getting its ID dynamically:

{props.types[2].map((element, index) => {
            return (
              <tr key={index}>
                <td className="align-middle">
                  {element.Type &&
                    commonFuctions.splitCapitalLetterString(element.Type)}
                </td>
                <td className="align-middle">
                  <div className="slideThree">
                    <input
                      type="checkbox"
                      value="None"
                      id={element.Type}
                      name="check"
                    />
                    <label htmlFor={element.Type}></label>
                  </div>
                ....
                ....
                ....

As you see the element which is getting dynamically id property is the checkbox. Below in the same JSX I have:

{/**********************PENSION TYPES***************************************** */}
      {props.types[0].length > 0
        ? DataExtract.uniquePensionTypes(props.types[0]).map(
            (element, index) => {
              {
                console.log(document.getElementById(`${element}`));
              }
            }
          )
        : ""}
    </div>

The important part here is this console.log. Argument in getElementById is the same as the id for checkbox. But for some reason it is not discovering the element and it is displaying null. So my questions is why? Is it at all possible to declare id of element and below in the same jsx to access it? I even tried to put static id for this checkbox and below to reach it with it's static value but still not working.

Answer 1

We cannot access the dom elements in the render method. Render just renders the changes on the Virtual DOM and not on the actual DOM.

If you want to access the elements rendered on DOM, do the same in ComponentDidMount or ComponentDidUpdate .

Answer 2

You could use React ref api to access the dom.

Refs provide a way to access DOM nodes or React elements created in the render method.

The document.getElementById is displaying null because the html element is not created yet. It's not recommended to directly access DOM elements in React .

Example:

Class component

import React, {Component} from 'react';

class MyComponent extends Component {

  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  render() {
    return (
      <table>
        {props.types[2].map((element, index) => {
          return (
            <tr key={index}>
              <td className="align-middle">
                {element.Type &&
                  commonFuctions.splitCapitalLetterString(element.Type)}
              </td>
              <td className="align-middle">
                <div className="slideThree">
                  <input
                    type="checkbox"
                    value="None"
                    id={element.Type}
                    name="check"
                    ref={this.myRef}
                  />
                  <label htmlFor={element.Type}></label>
                </div>
              </td>
            </tr>
          );
        })}
      </table>
    );
  }
}

Functional Component

import React, {useRef} from 'react'

function SomeComponent(props) {
  const inputEl = useRef(null);

  return (
    <table>
      {props.types[2].map((element, index) => {
        return (
          <tr key={index}>
            <td className="align-middle">
              {element.Type &&
                commonFuctions.splitCapitalLetterString(element.Type)}
            </td>
            <td className="align-middle">
              <div className="slideThree">
                <input
                  type="checkbox"
                  value="None"
                  id={element.Type}
                  name="check"
                  ref={inputEl}
                />
                <label htmlFor={element.Type}></label>
              </div>
            </td>
          </tr>
        );
      })}
    </table>
  );
}