How can I write this code without using React Hooks?

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;

Why not try to read about React Hooks so you can understand they work? Once you do that, you should be able to understand how you would write the code using the normal setState method.

I agree with @RandellDawson. 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
        )
    }
}

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

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

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;