Why do library imports and props show errors in React? (Solved)

When I was new to React

I am learning React.js and I've encountered a problem when importing the React library. An error is displayed, but it doesn't affect my output. 😥
Additionally, I encounter the same issue when using 'props' in a function.

Here is the screenshot:

How can I solve it??

Solution Explain Here:

You don't have to do anything; just ignore the error. If you have any unused libraries or variables in your code, then remove them. "eslint" shows errors for missing values and unused libraries.

Thank You 🗨️

Comments

[Jaspreet singh]

Just disable eslint in the eslintrc.json

[Ben Sinclair]

That's like saying just cut the seatbelts out of your car if they feel a bit tight.

[Pranesh Chowdhury]

I find it challenging to resolve errors in my code. Without any problem, it shows this error even though everything is right. So error fixing is really difficult when it showing.
Is there any other way to solve this?

[Ben Sinclair]

Ok, in the example you posted, eslint is telling you that you don't use something you explicitly imported. Why is it saying that if the code works? Well, it's because it's unnecessary and might be a sign that you overlooked something.

If I use a metaphor that's less car crashy, how about this:

Say you and your friend are going to buy food and drink for a party.
Your friend says, "I'll drive. Don't forget to bring the shopping list, your wallet, and a folding chair".

eslint at this point plays the part of your common sense - it says, "why are you telling me to bring a chair on a shopping trip? Is there something I should know?" And it won't get in the car until it has an answer.

So disabling eslint means accepting any weird thing your friend says at face value. What it wants you to do is to either say, "oh, I need to return that folding chair to the shop where I bought it", or "oops, I don't need the chair after all".

Extricating ourselves from my terrible metaphor, let's look at your code again:
You start with, import React from 'react'; but then you never use React anywhere in your code. You probably did this because you copied another React component and removed all the bits you didn't think you needed. That's a pretty common way to write code, btw, and nothing to feel bad about. So you can fix it by removing that line.

If you need to use the React object at some point in the future, you'll need to make sure you have that line to import it, but right now you don't. It's the folding chair in your shopping run.

Now, I'm guessing here, but I think the reason you haven't spotted this is because you think that a React component needs to have something magic happen to be counted as a React component, and unfortunately the build process for React (and most modern Javascript) is almost always set up so that a lot of things seem to happen by magic, so that's totally understandable. But a React component is just an object (or a class sometimes) loaded by something higher up the chain.

Does that make sense?

[Jaspreet singh]

lol, better not to deal with eslint in the beggining

[Pranesh Chowdhury]

Ok Thanks, I will try it.

[Jaspreet singh]

look wherever you have defined rules , and add a new rule for no-unused-vars to false, thats also not a good approach btw, you just need to remove React import line from the component, if it addresses about that react should be in environment while working in jsx or react, just disbable the rule.