.focus() is not a function

Question

I have been trying to change input field from one to the other with no avail, when I use .focus it gives me an error of it is not a function.

I will paste my code

import React, { useEffect } from 'react';
import { signup } from '../../assets/images';
import FormDiv from '../shared/Sign-in-div';
import ImageDiv from '../shared/Image-div';
import { Nunito32, Nunito20 } from '../shared/nunito/nunito';
import ImageContainer from '../shared/image-container';
import OtpField from '../shared/otp-field';
import PinkButton from '../shared/button-color-pink';

const SignUpVerification = () => {
  const fieldOne = React.createRef();
  const fieldTwo = React.createRef();
  const fieldThree = React.createRef();
  const fieldFour = React.createRef();

  return (
    <div style={{ display: 'flex' }}>
      <FormDiv style={{ textAlign: 'center' }}>
        <Nunito32
          style={{
            display: 'inline-block',
            textAlign: 'center',
            marginRight: 236,
            marginLeft: 200,
          }}
        >
          Verify your mobile number by entering the code we sent you
        </Nunito32>
        <div style={{ flexDirection: 'row' }}>
          <OtpField
            ref={fieldOne}
            style={{ marginRight: 10.5 }}
            onChange={() => fieldTwo.focus()}
          />
          <OtpField
            ref={fieldTwo}
            style={{ marginRight: 10.5 }}
            onChange={() => fieldThree.focus()}
          />
          <OtpField
            ref={fieldThree}
            style={{ marginRight: 10.5 }}
            onChange={() => fieldFour.focus()}
          />
          <OtpField
            ref={fieldFour}
            style={{ marginRight: 10.5 }}
            onChange={() => fieldFour.focus()}
          />
        </div>

        <PinkButton style={{ marginTop: 75 }}>Continue</PinkButton>
        <Nunito20>Send again</Nunito20>
      </FormDiv>
      <ImageContainer>
        <ImageDiv bg={signup} src={signup} alt="logo" />
      </ImageContainer>
    </div>
  );
};

export default SignUpVerification;

Can someone help pls. And if you know a better way to do it, Ill be grateful for leading me in the right path

Does this answer your question? [how react programmatically focus input](https://stackoverflow.com/questions/43145549/how-react-programmatically-focus-input) — Emile Bergeron, Dec 09 '19 at 15:25
I have one more question: ``` const fieldOne = React.createRef(); const fieldTwo = React.createRef(); const fieldThree = React.createRef(); const fieldFour = React.createRef(); ``` How can I make it one sentence? — SImon Haddad, Dec 09 '19 at 15:31

score 2 · Answer 1 · answered Dec 09 '19 at 15:12

2

According to docs

When a ref is passed to an element in render, a reference to the node becomes accessible at the current attribute of the ref.

So try using field.current.focus()

answered Dec 09 '19 at 15:12

Sumanth Madishetty

3,425
2
12
24

tony · Answer 2 · 2019-12-09T15:17:16.237

2

Since you have a functional component you should be using useRef. createRef will create a new reference on each render.

https://reactjs.org/docs/hooks-reference.html#useref

Also the reference will expose a property current which you have to use to set focus.

const fieldOne = useRef(null);
...
          <OtpField
            ref={fieldOne}
            style={{ marginRight: 10.5 }}
            onChange={() => fieldTwo.current.focus()}
          />
          <OtpField
            ref={fieldTwo}
            style={{ marginRight: 10.5 }}
            onChange={() => fieldThree.current.focus()}
          />

edited Dec 09 '19 at 15:17

answered Dec 09 '19 at 15:13

tony

1,274
1
11
27

I am not knowing how to implement it in my own use case – SImon Haddad Dec 09 '19 at 15:15
repalce `const fieldOne = React.createRef();` with `const field = React.useRef(null)` – Sumanth Madishetty Dec 09 '19 at 15:16

.focus() is not a function

2 Answers2