CODEWITHSUNDEEP
javascriptreactjsfirebasefirebase-storage
joey123
joey123

Reputation: 47

how to convert react class into react hooks(firebase storage)

I'm having a hard time converting react class component into hooks. It's been a while since i played around with react so i just can't get the hang of it.

What my code is trying to do is upload an image and get it inside firebase storage and displaying it. It works fine with class component but I just can't convert them into hooks. Can somebody help me plz???

import React, {Component} from 'react';
import fire from '../config/Fire';
import FileUploader from 'react-firebase-file-uploader';
import firebase from 'firebase';



class Fileupload extends Component {

  state = {
    image: '',
    imageURL: '',
    progress: 0
  }


  handleUploadStart = () => {

    this.setState({
      progress: 0
    })
  }

  handleUploadSuccess = filename => {
    this.setState ({
      image: filename,
      progress: 100
    })

    fire.storage().ref('avatars').child(filename).getDownloadURL()
    .then(url => this.setState({
      imageURL: url
    }))
  }



  render() {

    console.log("this.state", this.state)
    console.log("this.state.imageURL",this.state.imageURL)
  return (
    <div className="App">
      <h2>file upload and load</h2>

      <FileUploader  
      accept="image/*"
      name='image'
      storageRef={fire.storage().ref('avatars')}
      onUploadStart = {this.handleUploadStart}
      onUploadSuccess = {this.handleUploadSuccess}
      />
<div>
    <h4>show image</h4>
    <img src={this.state.imageURL} />

</div>


    </div>
  );
};
  }
export default Fileupload;

Upvotes: 1

Views: 143

Answers (1)

Jurrian
Jurrian

Reputation: 849

A couple of things to keep in mind, when refactoring a class to a hook. - Instead of Class use function() or a () => arrow function, - There is no render function only a return statement, - The this keyword is only used to bind functions and state to the Class. These are not used in functions, - Instead of this.setState, you should use the useState hook.

import React, { useState } from 'react';
import fire from '../config/Fire';
import FileUploader from 'react-firebase-file-uploader';
import firebase from 'firebase';

function Fileupload() {
  const [image, setImage] = useState('');
  const [imageURL, setImageUrl] = useState('');
  const [progress, setProgress] = useState(0);

  const handleUploadStart = () => {
    setProgress(0);
  };

  const handleUploadSuccess = filename => {
    setImage(filename);
    setProgress(100);

    fire
      .storage()
      .ref('avatars')
      .child(filename)
      .getDownloadURL()
      .then(url => setImageUrl(url));
  };

  return (
    <div className="App">
      <h2>file upload and load</h2>

      <FileUploader
        accept="image/*"
        name="image"
        storageRef={fire.storage().ref('avatars')}
        onUploadStart={handleUploadStart}
        onUploadSuccess={handleUploadSuccess}
      />
      <div>
        <h4>show image</h4>
        <img src={imageURL} />
      </div>
    </div>
  );
}

export default Fileupload;

Upvotes: 2

Related Questions