suddenly Error emerging after coding for multiple days: 'React' must be in scope when usin-CodePudding

I have been coding on a react.js web app for a few days, just to learn and apply things I have learnt, so please be nice even if the problem is obvious. The Error I get is:

'React' must be in scope when using JSX  react/react-in-jsx-scope

This happened after I installed a library and then uninstalled it, although it could've been cause by something else. After googling about this pretty much all of the things I found were talking about importing react correctly into the file, which I had not done at all, but changing

import { useState } from "react";

import React, { useState } from "react";

did not change anything. This is the code the Error is reffering to:

    import React, { useState } from "react";

const AddToDoList = () => {
    const [title, setTitle]= useState('');
    const [des, setDes] = useState('');
    const [subject, setSubject] =useState('Deutsch');
    const handleSubmit=(e)=>{
        //e.preventDefault();
        const Task={title, des, subject, stat:false}
        fetch('http://localhost:8000/tasks', {
            method: 'POST',
            headers: {"Content-Type": "application/json"},
            body: JSON.stringify(Task)
        }).then(console.log("among us is added"));
    }
    return ( 
        <div className="CreateTask">
        <form onSubmit={handleSubmit}>
            <label className="TopText"> Add a Task:
            <br/>
            <input
                className="TextInput" 
                type="text"
                placeholder="Title for Task (Required)" 
                required="required" 
                value={title}
                onChange={(e) => setTitle(e.target.value)}
                />
            </label>
            <br/>
            <textarea placeholder="Short description of Task (Optional)" value={des} onChange={e => setDes(e.target.value)}></textarea>
            <br />
            <select
            value={subject}
            onChange={e=> setSubject(e.target.value)}>
                <option value="Deutsch">Deutsch</option>
                <option value="Biologie">Biologie</option>
                <option value="N/A">N/A</option>
            </select>
            <input className="button" type="submit" />
        </form>
        </div>
        
    );
}
 
export default AddToDoList;

If anyone has any idea, help is hugely appreciated, thank you!

CodePudding user response：

One guess is that, importing React at the top was mandatory and throws this error, until V17.0.0 I think.. so there's a chance that your package-lock.json or node-modules have downgraded your react version

CodePudding user response：

Okay so I have managed to solve it. I have to import react on every single js script I have, even though I have version 18, in which (after the documentation) you don't have to import it. I don't understand why this happend and furthermore why it suddenly wanted me to do this, as it was fine all this time before but it works now and that is really all what matters.