Inline javascript not working in react(says needs brackets and is not using inline script code)

Question

Hi I am making a log in page -that takes in the username + processes it and if right then redirects to home page(currently is giving me the error message shown below when run -gives alerts/warnings with number of chances left(when 0 doesn't do much but will make it redirect to empty page) -writes in console "Hello "+username just for testing that it works

and shows this error in intellIJ IDE:

and the code for the file is shown below please let me know why it is not working:

import React, {useState} from 'react';
import "./Login.css"
//allows page navigation
import { useNavigate } from "react-router-dom";

function Login() {
//navigate constant is used to redirect to another page
const navigate = useNavigate();
    return (
        <div className={"form-inner"}>
            <form>
                <h2>Login to Study Skills</h2>
                <div className={"form-group"}>
                    <label htmlFor={"name"}><b>Username:</b></label>
                    <input type={"text"} id="myText" placeholder={"Enter Username"} name={"username"} required/>
                    <select>
                        <option>Student</option>
                        <option>Tutor</option>
                    </select>
                </div>
                    <button id="myButton"> SIGN IN </button>
            </form>
            <script>
                function authenticate(a){
                var t1 = false;
                var t2 = false;
                var b = c.search("[a-z][a-z][0-9][0-9][0-9][0-9][0-9]")
                if(b == 0){
                t1 = true}
                if(a.length == 7){
                t2 = true}
                return t1&&t2}
            var n = 3;
                document.getElementById("myButton").onclick = function(){
                var myName = document.getElementById("myText").value;
                if(authenticate(myName)){
                () => navigate("/website")
                console.log("welcome "+myName)
            }
                else if(n == 0){
                alert("no more log-ins")
            }
                else{
                alert("you have "+n+" chances to log-in again")
                n--
            }
            }
            </script>
        </div>
    )
}
    export default Login;

Thanks a lot for any help as this has got me stuck for a few hours now and I can't do it another way

JSX != HTML. You can't treat a `script` tag in JSX the same way as in plain HTML. — Brian Thompson, Mar 08 '22 at 20:43
Or maybe this older one - https://stackoverflow.com/questions/31276926/how-to-add-script-tag-using-reactjs — Brian Thompson, Mar 08 '22 at 20:46
Delete and you'll just be left with the function. Then move that function to the top of your component (or put it into it's own .js file), and call the function as you would any other. ... then work on rewriting that code so it works the way React wants you to work. i.e. don't call document.getElementById(). Instead look into useRef(). Set myButton's onClick to the authenticate function, etc. — Dave, Mar 08 '22 at 20:50
You need to understand how React actually work before start writing code because it's not HTML, also, you need to learn React Hooks such as (useState, useRef, useEffect) — Abdulmuhaymin, Mar 08 '22 at 21:03

score 0 · Answer 1 · answered Mar 08 '22 at 21:05

Here's your code with some changes. I changed the "n" variable to "chancesRemaining" with and it's setter so it will be remembered across renders. The "myText" value is the value of the input, and 'setMyText' will update it when the input changes. Your button will call "myButtonOnClick" when clicked, which will call your authenticate function. And authenticate function had mismatched variables so I use "name" which is what I assume you want.

There may still be errors / syntax errors, but this gets you close to what you want.

import React, { useState } from 'react'
import "./Login.css"
//allows page navigation
import { useNavigate } from "react-router-dom"

function Login() {
  //navigate constant is used to redirect to another page
  const navigate = useNavigate()
  const [myText, setMyText] = useState('Enter Username')
  const [chancesRemaining, setChancesRemaining] = useState(3)
  
  function authenticate(name) {
    var t1 = false
    var t2 = false
    var b = name.search("[a-z][a-z][0-9][0-9][0-9][0-9][0-9]")
    if (b == 0) {
      t1 = true
    }
    if (name.length == 7) {
      t2 = true
    }
    return t1 && t2
  }

  const myButtonOnClick = () => {
    var myName = myText
    if (authenticate(myName)) {
      () => navigate("/website")
      console.log("welcome " + myName)
    }
    else if (chancesRemaining == 0) {
      alert("no more log-ins")
    }
    else {
      alert("you have " + chancesRemaining + " chances to log-in again")
      setChancesRemaining(chancesRemaining - 1)
    }
  }

  return (
    <div className={"form-inner"}>
      <form>
        <h2>Login to Study Skills</h2>
        <div className={"form-group"}>
          <label htmlFor={"name"}><b>Username:</b></label>
          <input type={"text"} value={myText} onChange={(e)=>{setMyText(e.target.value)} } placeholder={"Enter Username"} name={"username"} required />
          <select>
            <option>Student</option>
            <option>Tutor</option>
          </select>
        </div>
        <button onClick={myButtonOnClick}> SIGN IN </button>
      </form>
    </div>
  )
}
export default Login

score 0 · Answer 2 · answered Mar 08 '22 at 21:11

u cant use script tag in jsx

import React, { useState } from 'react';
import "./Login.css"
//allows page navigation
import { useNavigate } from "react-router-dom";

function Login() {
  //navigate constant is used to redirect to another page

 function authenticate(a) {
     var t1 = false;
     var t2 = false;
     var b = c.search("[a-z][a-z][0-9][0-9][0-9][0-9][0-9]")
     if (b == 0) {
         t1 = true
     }
     if (a.length == 7) {
         t2 = true
     }
     return t1 && t2
 }
 var n = 3;
 function submitFun () {
     var myName = document.getElementById("myText").value;
     if (authenticate(myName)) {
         () => navigate("/website")
         console.log("welcome " + myName)
     }
     else if (n == 0) {
         alert("no more log-ins")
     }
     else {
         alert("you have " + n + " chances to log-in again")
         n--
     }
 }
 const navigate = useNavigate();
 return (
     <div className={"form-inner"}>
         <form onSubmit={submitFun}>
             <h2>Login to Study Skills</h2>
             <div className={"form-group"}>
                 <label htmlFor={"name"}><b>Username:</b></label>
                 <input type={"text"} id="myText" placeholder={"Enter Username"} name={"username"} required />
                 <select>
                     <option>Student</option>
                     <option>Tutor</option>
                 </select>
             </div>
             <button id="myButton"> SIGN IN </button>
         </form>

     </div>
 )
  }

  export defualt Login

Inline javascript not working in react(says needs brackets and is not using inline script code)

2 Answers2