[Solved] I want to use Hooks here but don’t know how . This is my code

by


React hooks can’t be used outside of functional components.

Here, you have a class components (also can’t use hooks) Register. You need convert it into functional component and append your state hooks into it. Also, you can useCallback for momize function.

export const Register = (props) => {
    const [usernameReg, setUsernameReg] = useState("");
    const [passwordReg, setPasswordReg] = useState("");

    const register = useCallback(() => { //You also can use hook useCallback for memoize fucntion 
      Axios.post("https://localhost3001/register", {
        username: usernameReg,
        password: passwordReg,
      }).then((response) => {
        console.log(response);
      });
    }, [usernameReg, passwordReg]);

    return <div className="base-container" ref={this.props.containerRef}>
        <div className="header">Register</div>
        <div className="content">
          <div className="image">
             <img src={loginImg} />
          </div>
          <div className="form">
             <div className="form-group">
                <label htmlFor="username">Username</label>
                <input
                    type="text"
                    name="username"
                    placeholder="username"
                    onChange={(e) => {
                        setUsernameReg(e.target.value);
                    }}
                    value={usernameReg} //Don't forget about use value attribute from state
                />
             </div>
             <div className="form-group">
                <label htmlFor="email">Email</label>
                <input type="text" name="email" placeholder="email" />
             </div>
             <div className="form-group">
                <label htmlFor="password">Password</label>
                <input
                    type="text"
                    name="password"
                    placeholder="password"
                    onChange={(e) => {
                        setPasswordReg(e.target.value);
                    }}
                    value={passwordReg} //Don't forget about use value attribute from state
                />
             </div>
          </div>
        </div>
        <div className="footer">
          <button type="button" onClick={register} className="btn">
          Register
          </button>
        </div>
    </div>
}

solved I want to use Hooks here but don’t know how . This is my code