How can I write this code without using React Hooks?

1

I have a class component not a function so this code no longuer works for me, how can I write the same code just using React setState method.

import React, { Fragment, useState } from 'react';
import axios from 'axios';
import Message from './message';
import Progress from './progress';

const FileUpload = () => {
    const [file, setFile] = useState("");
    const [filename, setFilename] = useState("Choose File");
    const [uploadedFile, setUploadedFile] = useState({});
    const [message, setMessage] = useState("");
    const [uploadPercentage, setUploadPercentage] = useState(0);

    const onChange = e => {
        setFile(e.target.files[0]);
        setFilename(e.target.files[0].name);
    }

    const onSubmit = async e => {
        e.preventDefault();
        const formData = new FormData();
        formData.append("file", file); // or "movieImg"

        try {
            const res = await axios.post("/img", formData, {
                headers: {
                    "Content-Type": "multipart/form-data"
                },
                onUploadProgress: progressEvent => {
                    setUploadPercentage(parseInt(Math.round((progressEvent.loaded*100)/progressEvent.total)));
                    setTimeout(() => setUploadPercentage(0), 5000);
                }               
            });

            const { filename, filepath } = res.data;
            setUploadedFile({ filename, filepath });
            setMessage("File uploaded");
        } catch(err) {
            if(err.response.status === 500) {
                setMessage("there was a problem with the server.");
            } else {
                setMessage(err.response.data.message);
            }
        }
    }

    return ( 
        <Fragment>
            {message ? <Message message={message} /> : null}
            <form onSubmit={onSubmit}>
                <div className="custom-file mb-4">
                    <input type="file" className="custom-file-input" id="customFile" onChange={onChange} />
                    <label className="custom-file-label" htmlFor="customFile" >
                        {filename}
                    </label>
                </div>
                <Progress percentage={uploadPercentage} />
                <input type="submit" value="Upload" className="btn btn-primary btn-block mt-4" />
            </form>
            { uploadedFile ? 
                <div className="row mt-5">
                    <div className="col-md-6 m-auto">
                        <h3 className="text-center">{ uploadedFile.filename }</h3>
                        <img style={{width: "100%"}} src={uploadedFile.filepath} />
                    </div>
                </div> : null }
        </Fragment>
     );
}
 
export default FileUpload;
3

I agree with @camperextraordinaire. But, to demonstrate how easy it is to cross over, I’ve just tweaked your code a little bit to get you started.

import React, {Component, Fragment} from 'react';
import axios from 'axios';
import Message from './message';
import Progress from './progress';

class FileUpload extends Component {
    constructor(props) {
        super(props)

        this.state = {
            file: "",
            filename: "Choose File",
            ... // you get the point, I hope.
        }
    }

    onChange(e) {
        this.setState({
            file: ... // update state
    })

    ... // other methods
    
    render () {
        return(
            .. // stuff to return
        )
    }
}
4

ok thanks I’ll read about react hooks, you are right!

5

what happens if I write a functional component with hooks and I import this component in a class component, would this work? @willjw3

6

for example if I have a functional component like this

import React, { useState } from 'react';

const ExampleFunction = () => {
    const [filename, setFilename] = useState("Choose File");

    return (  
        <div>

        </div>
    );
}
 
export default ExampleFunction;

would it work to do this

import React, { Component } from 'react';
import ExampleFunction from './exampleFunction';

class ExampleClass extends Component {
    render() { 
        return (  
            <div>
                <ExampleFunction />
            </div>
        );
    }
}
 
export default ExampleClass;