Change class-based component to functional

Hello,

I have converted my class-based component to functional,
but when I run the project I encounter this error:

Failed to compile

./src/App.jsModule not found: Can't resolve './components/ImageUpload2' in 'H:\react_Image_Editor_TRY\imageEditor19 - Copy (2)\ClientApp\src'

But the component ImageUpload2 exists!

Do you think where is the problem?
Here come my code:


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

export function ImageUpload2() {

    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 => {

        //selectedFile: event.target.setSelectedFile[0],
        //    selectedFileName: event.target.setSelectedFileName[0],
        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);
                //this.setState({ uploadResult: "File " + data.fileName + " successfully uploaded." });
                setUploadResult: "File" + data.fileName + "successfully uploaded";
                getList();
            });
    }

    const onNavToEditor = async () => {

        setRedirect( "/ImageEditor");
    };

    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={description} onChange={DescriptionChange} />
                <button onClick={FileUpload}>
                    Upload!
                    </button>

            </div>

            <div onClick={NavToEditor}>

                {listItems()}

            </div>

        </div>

    );

};

best regards,
Saeed

Please also share the code where you are importing the component for use.

1 Like

@dlaub3 is exactly right, the issue doesn’t seem to be in the module you’re exporting, but in the impart.

We can’t see your App.js, but more importantly, we don’t know the structure you’ve used. Is the components directory within src, or is it a directory alongside src?

the error does not seem to involve the content of ImageUpload2, but rather how the component was imported. Please let us see the import statements in App.js.

Sidenote, there is an error in the component unrelated to your issue, you used useEffect but did not import it.