Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

204
Views
suddenly Error emerging after coding for multiple days: 'React' must be in scope when using JSX react/react-in-jsx-scope

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!

about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

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

about 4 years ago · Juan Pablo Isaza Report

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.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!