Question 191565 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Ref current is ready only in class component

I am using a ref created using createRef to store a string value in a class component. However, whenever I try to change the value of current, I get the error that current is ready only. I am using typescript:

class MyClassComponent extends React.Component {
  myRef = React.createRef<string>();

  someFunction = () => {
    this.myRef.current = 'value'; //error here: current is ready only.
  };
}
Tags:

2

Answers


  1. 0

    React 18.2.0, @types/react 18.2.13

    React.createRef() returns the RefObject type which the .current property is read-only. We can declare the React.MutableRefObject type for myRef.

    current: Initially, it’s set to null.

    So the final type is React.MutableRefObject<string | null>.

    interface MutableRefObject<T> {
    current: T;
}

    interface RefObject<T> {
    readonly current: T | null;
}

    class MyClassComponent extends React.Component {
  myRef: React.MutableRefObject<string | null> = React.createRef();

  someFunction() {
    this.myRef.current = 'value'; 
  }
}

    stackblitz

    Also, have a look at this issue

    Login or Signup to reply.
  2. 0

    createRef will give you a RefObject to pass as a ref property, the current field of this is readonly.

    If you need a mutable reference (commonly used as state that can be changed without triggering a re-render), consider switching to a functional component and use useRef.

    const MyComponent = () => {
    const myRef = React.useRef<string>()

    const someFunction = () => {
        myRef.current = 'value'; // works, will NOT trigger re-rendering of the component
    }

    return <p> Some Content here... </p>
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search