1

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";

to

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!

Jona Grell
  • 39
  • 2
  • 6

2 Answers2

0

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

Yasser hennawi
  • 735
  • 4
  • 10
  • Very good suggestion, but after checking I have found that my current react version is 18.1. Thank you for the answer! – Jona Grell May 27 '22 at 22:13
0

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.

Jona Grell
  • 39
  • 2
  • 6
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 28 '22 at 12:42