I've been having this issue where I can't type in certain parts of the form, like username, lastname, and firstname. Here's my code: (It's in react)

import React, { useState } from "react";
import {Routes, Route, useNavigate} from 'react-router-dom';
import logo from'../logo.png';
import '../index.css';



export const Register = (props) => {
    const navigate = useNavigate();
    const login = () => {
        navigate('/Login');
    };
    const [email, setEmail] = useState('');
    const [pass, setPass] = useState('');
    const [reppass, setrepPass] = useState('');
    const [firstname, setfirstName] = useState('');
    const [lastname, setlastName] = useState('');
    const [username, setuserName] = useState('');


    const handleSubmit = (e) => {
        e.preventDefault();
        console.log(email);
    }

    return (
        <div className="App">
        <div className="auth-form-container" style={{boxSizing: 'content-box', display: 'flex',  justifyContent:'center', alignItems:'center', position: 'relative', height: '100%', marginRight: '30rem', marginLeft: '30rem', marginTop: '50px', marginBottom: '50px'}}>
        <img src={logo} alt="VaporCode Logo"></img>
            <h2 style={{ color: 'white' }}>Register</h2>
        <form className="register-form" onSubmit={handleSubmit}>
            <label htmlFor="firstname" style={{ color: 'white' }}>First Name</label>
            <input value={firstname} firstname="firstname" id="firstname" placeholder="First Name"/>
        <label htmlFor="lastname" style={{ color: 'white' }}>Last Name</label>           
        <input value={lastname} lastname="lastname" id="lastname" placeholder="Last Name"/>
        <label htmlFor="email" style={{ color: 'white' }}>Email</label>
            <input value={email} onChange={(e) => setEmail(e.target.value)}type="email" placeholder="Email" id="email" name="email" />
        <label htmlFor="username" style={{ color: 'white' }}>Userame</label>
            <input value={username} username="username" id="username" placeholder="Username"/>
            <label htmlFor="password" style={{ color: 'white' }}>Password</label>
            <input value={pass} onChange={(e) => setPass(e.target.value)} type="password" placeholder="Password" id="password" name="password" />
        <label htmlFor="repeatpassword" style={{ color: 'white' }}>Retype Password</label>
            <input value={reppass} onChange={(e) => setrepPass(e.target.value)} type="password" placeholder="Retype Password" id="repeatpassword" name="repeatpassword" />

            <button type="submit">Register</button>
        </form>
        <linkbutton className="link-btn" onClick={login}>Already have an account? Login here.</linkbutton>
    <div style={{ display: "flex", justifyContent: "center" }}>
            <iframe src="https://www.guilded.gg/canvas_index.html?route=/canvas/embed/badge/4R5YgKWR" width="294" height="48" frameborder="0" scrolling="no" frameborder="0"></iframe>
        </div>
    </div>
    </div>
    )
}

export default Register;

Please let me know if I'm doing something wrong, or if I need to provide more files!

I've tried changing the type to "name" and "text", but it doesn't work. I'm fairly new to HTML and react, so it might just be me. :)

CodePudding user response：

You should add onChange handlers to all inputs you want to change.

<input onChange={(e) => setfirstName(e.target.value)} value={firstname} firstname="firstname" id="firstname" placeholder="First Name" />

Here, you can read more about Controlled Components