Your idea about my functional component code

Hello,

I’ve changed my class-based component to functional.
I will be pleased if you let me know your idea about the code or if anywhere is wrong.




import { Redirect } from "react-router-dom";
import React, { useState } from "react";

export function ImageUpload1() {

    const [redirect, setRedirect] = useState(null);
    const [selectedFile, setSelectedFile] = useState(null);
    const [description, setDescription] = useState(null);
    const [uploadResult, setUploadResult] = useState(null);
    const [selectedFileName, setSelectedFileName] = useState(null);
    const [fileIdList, setFileIdList] = useState([]);


    useEffect(

        
        const getList = () => {
            fetch('api/Image')
                .then(response => response.json())
                .then(data => setFileIdList({ fileIdList: data }));
        };
    );

    const onFileChange = event => {

       
        
        setSelectedFile(event.target.files[0]);
        setSelectedFileName(event.target.files[0]);
    };

    const onDescriptionChange = event => {

        setDescription(event.target.value);
    };
    const onFileUpload = async () => {

        const formData = new FormData();

        formData.append(
            "ImageData.File",
            setSelectedFile,
            setSelectedFileName
        );



        fetch('/api/Image', {
            method: 'POST',
            body: formData
        }).then(resposne => resposne.json())
            .then(data => {
                console.log(data);
              
                setUploadResult: "File" + data.fileName + "successfully uploaded";
                getList();
            });
    }

    const onNavToEditor = async () => {

        //this.onFileChangeName();

        //this.setState({ redirect: "/ImageEditor" });
        //    this.setState({ selectedFileName: });

        setRedirect( "/ImageEditor");

    };
    **const listItems = () => {**
**        const listItems = this.state.fileIdList.map((item) =>**
**            <div key={item.imageId.toString()}>**
**                <img src={"/api/Image/DownloadImage/" + item.imageId}**
**                    alt={item.fileName}**
**                    className="img-thumbnail"**
**                    height="100" width="100" />**
**            </div>**
**        );**
        return (<div>{listItems}</div>);
    };

    return (

        <div>
            <div style={mystyle} onClick={NavToEditor} />
            <h1>File Upload Demo</h1>
            <div >{uploadResult} onClick={NavToEditor}</div>
            <div>
                <input type="file" onChange={FileChange} />
                <input type="text" **value={this.state.value}** onChange={DescriptionChange} />
                <button onClick={FileUpload}>
                    Upload!
                    </button>

            </div>

            <div onClick={NavToEditor}>

                {listItems()}

            </div>

        </div>




    );

};


regards,
Saeed