How to use React.useRef() in class component?

Question

I need this code to be implemented in class component. It is in order to use a upload progress in my class component with react-toastify

function Example(){
  const toastId = React.useRef(null);
  function handleUpload(){
    axios.request({
      method: "post", 
      url: "/foobar", 
      data: myData, 
      onUploadProgress: p => {
        const progress = p.loaded / p.total;
        if(toastId.current === null){
            toastId = toast('Upload in Progress', {
            progress: progress
          });
        } else {
          toast.update(toastId.current, {
            progress: progress
          })
        }
      }
    }).then(data => {
      
      toast.done(toastId.current);
    })
  }
  return (
    <div>
      <button onClick={handleUpload}>Upload something</button>
    </div>
  )
}

How can i do that?

Rohit Parte · Accepted Answer · 2023-11-03 19:18:28Z

101

useRef() is among react hooks which are meant to be used in Functional components. But if you want to create a reference in a class-based component, you can do it from the class constructor like the code below:

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

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

Check React.createRef().

edited Nov 3, 2023 at 19:18

Rohit Parte

4,25233 silver badges31 bronze badges

answered Jun 21, 2020 at 13:21

Mwibutsa Floribert

2,0041 gold badge17 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gargi Goyal · Accepted Answer · 2022-03-11 15:29:30Z

7

Assign your value in constructor i.e bind with this.

createRef !== useRef, useRef is used to preserve the value across re-renders and for that in class component you need to bind it with this not createRef

answered Mar 11, 2022 at 15:29

Gargi Goyal

1291 silver badge4 bronze badges

2 Comments

Facundo Colombier Over a year ago

you should add a code example

Nikitas IO Over a year ago

As @FacundoColombier said, the answer should contain a code example.

di0n · Accepted Answer · 2023-06-11 00:01:24Z

0

How to use React.useRef() in class extends component:

import { Component, createRef } from "react";

export default class App extends Component{
 constructor(props){
    super(props);
   
    this.myP = createRef();
    window.addEventListener("load", ()=>this.prompt());
 }
 prompt(){
     this.myP.current.innerText = 'Hello World!'
 }
 render(){
    return(
        <>
          <p ref={this.myP} />        
        </>
    );
 }
}

answered Jun 11, 2023 at 0:01

di0n

859 bronze badges

Collectives™ on Stack Overflow

How to use React.useRef() in class component?

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related