CODEWITHSUNDEEP
reactjs
nim
nim

Reputation: 105

Can't type text into text fields in React

This is the 'add employee' page in the employee management system. Here I created a form using react but I can't enter or type texts to these input text fields. How can I solve this?

const AddEmployee=()=>{
    const [state, setState]=useState(initialState);
    const{firstName,lastName,emailId}= state;
    const addEmployee = async(data)=>{
        EmployeeService.createEmployee(data);
        
    };
    const handleInputChange = (e) =>{
        let { firstName, value  }= e.target;

        setState({ ...state, [firstName]:value});
    }

    return (
        <div>
                   <form>
                                
                               <label htmlFor="firstName"> First Name: </label>
                               <input type="text" placeholder="First Name" name="firstName" className="form-control" 
                                           value={firstName} onChange={handleInputChange} required/>   
                                    <button className="btn btn-success" onClick={handleSubmit}>Save</button>
                                     </form>
                            </div>
                        
    );
}

export default AddEmployee;

Upvotes: 0

Views: 44

Answers (1)

Ivo
Ivo

Reputation: 2510

You want to extract name from e.target not "firstName" that does not exist on the e.target element:

const handleInputChange = (e) =>{
    let { name, value  }= e.target;
    setState({ ...state, [name]:value});
}

Upvotes: 3

Related Questions