Where is wrong in my function-based react code

You still have duplicate imports.

When you delete the first line, what is the error message now?

Right, but when that happens, it also tells you what the error is. There is no point guessing what it is.

When I place the pointer on the red lines it show:

(ESLint) no-undef: get list is not defined.

Right , I assume that’s autocorrect when you typed it, but getList isn’t defined. You are calling a function called getList – the error is saying that is going to fail when you try to run the code, because it hasn’t been defined anywhere.

But I have defined it.
It shows the red line under all functions.
What should I do now?
Where should I define it?

It’s really difficult to debug things from just a description of something not working. Can you please put a version of this that shows the error on, say, CodeSandbox?

But its back-end is ASP core. I don’t assume its possible!
Do you think it is possible?

Well it doesn’t need to be connected to any back end. The errors haven’t got anything to do with any back end, they’re in the JS code you’re looking at. It can literally be an app that just has that component, replace fetch with something that just returns something you want, and remove the react router bits

Can you please describe me how can I import a project from pc to one of these js editor?

I googled it bot found nothing!!

Copy the code above, paste it into the react template, stub out the network call (fetch) with function that just returns whatever the expected data is, comment out the router code

Please check this:

I hope this file works!

  • You haven’t imported the component into the app, so it never gets evaluated
  • You still have a duplicate import
  • You haven’t replaced the fetch calls with anything
  • You haven’t either installed react router or commented out the react router code (latter is much easier, it has nothing to do with what you’re trying to debug)

Can you please explain more about this?
How could you debug in codesandbox?

You are missing the variable declaration for all your arrow functions.

You have:

getList = (selectedFile) => {
  ...code
};

Should be:

const getList = (selectedFile) => {
  ...code
};
1 Like

Just to answer this specifically: you have a React app, that’s it, so if you don’t do basic things to make it work, it won’t work. It isn’t any different to running an app locally, there isn’t a special way of debugging. It’s just an online development environment, basically same as you running VSCode + a live reloading server locally.

So like if you don’t import a component, that component won’t render. If you have a duplicate import, it will error, because that’s a basic syntax error. If you have fetch calls that aren’t hitting an endpoint then maybe replace them with dummy calls instead so that you don’t need to think about that. If you haven’t installed a dependency, maybe install it. If you don’t need a dependency for what you’re checking, maybe delete that code. And so on.

I see for example FileUpload is not defined but I have defined:

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({ uploadResult: "File " + data.fileName + " successfully uploaded." });

                getList();
            });
    }

You haven’t imported the component into the app, so it never gets evaluated

I changed it to:


import React, { useEffect, useState, Component } from "react";

But again I see a green line under component!

Is the definition wrong?

FileUpload is in fact undefined. You are using it here.

<button onClick={FileUpload}>

But you do not have a FileUpload function defined anywhere in the code you posted. You do have an onFileUpload function.

Component is for class components, you do not use it for function components. So no need to import it.

Exactly how should I define FileUpload?
Can you please describe me or write an example if it’s possible?

Thanx,

The same way you did it for all the other functions.

Are you sure you didn’t just mean to use onFileUpload?

<button onClick={onFileUpload}>

Yes,
Do you mean I haven’t passed any argument?

Check the code sandbox I have done all of them like this

const onFileChange = e => {


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

Do you mean I should remove on from the first of it?

You are using a function named FileUpload in the JSX that does not exist. You have not written a function named that.

The same goes for the other functions as well. They are all missing the on part of the name.

onChange={DescriptionChange}
onChange={FileChange}
onClick={NavToEditor}
onClick={FileUpload}

They should all start with on, e.g. onDescriptionChange because that is what you named the functions when you wrote them.