Line 30: 'React' must be in scope when using JSX when it is deploying on heroku

Question

./src/components/Login.jsx Line 30: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 31: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 32: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 33: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 34: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 35: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 36: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 37: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 40: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 42: 'React' must be in scope when using JSX react/react-in-jsx-scope

This is login.jsx

    import { Cancel, Room } from "@material-ui/icons";
    import  axios  from "axios";
    import  { useRef, useState } from "react";
    import "./login.css";


   export default function Login({ setShowLogin, setCurrentUser,myStorage }) {
   const [error, setError] = useState(false);
   const usernameRef = useRef();
   const passwordRef = useRef();

   const handleSubmit = async (e) => {
 

        e.preventDefault();
         const user = {
         username: usernameRef.current.value,
        password: passwordRef.current.value,
         };
        try {
       const res = await axios.post("/users/login", user);
       setCurrentUser(res.data.username);
       myStorage.setItem('user', res.data.username);
       setShowLogin(false)
       setError(false);
       } catch (err) {
       setError(true);
       }
       };
       return (
    
        here its starting
        <div className="loginContainer">
        <div className="logo"></div>
        <Room className="logoIcon"/>
        <span>Oradea Bikepark Pin</span>
        <form onSubmit={handleSubmit}>
        <input autoFocus placeholder="username" ref={usernameRef} />
        <input type="password" min="6" placeholder="password" ref={passwordRef} />
        <button className="loginBtn" type="submit">Autentificare</button>
        {error &&
               <span className="failure">Ceva este greșit!</span>}
                    </form>
    hear  it's finish
                      <Cancel
                             className="loginCancel"
                             onClick={() => setShowLogin(false)}
                     />
             </div>
        );
    }

Answer 1

Try to add React to this line :

import  React,{ useRef, useState } from "react";