How to access child by the reference of parent in React effectively?

Question

My html:-

<form>
  <div class="userPhoto"><img src="https://picsum.photos/300/700" alt=""></div>
  <div class="name">
    <div class="fN">
      <p>First Name :</p>
      <div class="ic"><input type="text" name="first_name">
        <div class="icon">
          <div class="error" style="display: none; visibility: hidden;"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path>
            </svg></div>
          <div class="success" style="display: block;"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path>
            </svg></div>
        </div>
      </div>
    </div>
    <div class="fN">
      <p>Last Name :</p>
      <div class="ic"><input type="text" name="last_name">
        <div class="icon">
          <div class="error" style="display: none; visibility: hidden;"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path>
            </svg></div>
          <div class="success" style="display: block;"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path>
            </svg></div>
        </div>
      </div>
    </div>
  </div>
  <div class="email">
    <div class="cont">
      <p>Enter your email :</p>
      <div class="ic"><input type="email" name="email">
        <div class="icon">
          <div class="error" style="display: block; visibility: visible;"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path>
            </svg></div>
          <div class="success" style="display: none;"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path>
            </svg></div>
        </div>
      </div>
    </div>
    <div class="process">
      <p class="pc">Checking Availability...</p>
      <p class="ps">Email is available .</p>
      <p class="pe">This Email is already in use .</p>
    </div>
  </div>
  <div class="contact_no">
    <div class="cont">
      <p>Enter your contact number :</p>
      <div class="ic"><input type="number" name="email">
        <div class="icon">
          <div class="error" style="display: none; visibility: hidden;"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path>
            </svg></div>
          <div class="success" style="display: block;"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path>
            </svg></div>
        </div>
      </div>
    </div>
    <div class="process">
      <p class="pc">Checking Availability...</p>
      <p class="ps">contact no. is available .</p>
      <p class="pe">This contact no. is already in use .</p>
    </div>
  </div>
  <div class="userName">
    <div class="cont">
      <p>Choose an user name:</p>
      <div class="ic"><input type="text" name="email">
        <div class="icon">
          <div class="error" style="display: block; visibility: visible;"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path>
            </svg></div>
          <div class="success" style="display: none;"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path>
            </svg></div>
        </div>
      </div>
    </div>
    <div class="process">
      <p class="pc">Checking Availability...</p>
      <p class="ps">user name is available .</p>
      <p class="pe">This user name is already in use .</p>
    </div>
  </div>
  <div class="password">
    <div class="cont">
      <p>create an strong PASSWORD:</p>
      <div class="ic"><input type="password" name="email">
        <div class="icon">
          <div class="error" style="display: none; visibility: hidden;"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path>
            </svg></div>
          <div class="success" style="display: block;"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path>
            </svg></div>
        </div>
      </div>
    </div>
  </div>
  <div class="conform_password">
    <div class="cont">
      <p>conform password:</p>
      <div class="ic"><input type="password" name="email">
        <div class="icon">
          <div class="error" style="display: none; visibility: hidden;"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path>
            </svg></div>
          <div class="success" style="display: block;"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path>
            </svg></div>
        </div>
      </div>
    </div>
  </div>
  <div class="formSubmit">
    <div class="button">
      <p>Sign up</p>
    </div>
  </div>
</form>

I have reference const form = useRef(null); to html form element.

But I need value of input inside .password class.

How I am achieving now in React

let passwordText = form.current.children[5].children[0].children[1].children[0].value;

But I think it's not the right. As it's lengthy. And I am not willing to use another variable for password reference.

Is there a easy and short way to achieve this?

Answer 1

The easiest way to achieve this is to use events in javascript. Put a onChange() function on the password input like below

<input type="password" onChange={handleChange} />

The handleChange function will look something like

handleChange = (e) => console.log(e.target.value);

I am console logging here just for an example. You can save the value in some state variable or directly into localStorage or external database.

If you don't want to keep a track of every change, you can have a button and call this method only on that button click which will reduce the time this function is called.

To do the same thing with useRef() , you can put a reference const password = useRef(null) on the input tag of password itself. You can get the value out of that input using password.current.value .

I hope this answer helps. If it did, please mark this as accepted.

Answer 2

Since you already have access to formRef you can use the following to get particular input in the form.

const passwordEl = formRef.current.querySelector('.password')

now you can access it's properties like so

console.log(passwordEl.value, passwordEl.name)

Here's an example using age input field

codesandbox