Can't input on other Form Fields

user_16112773 0
Viewed 66

I'm using react. I was wondering on why can I only edit the FirstName part of the form while the other input fields wont let me type anything.

Here is my code:

import React, {useContext, useState, useEffect} from 'react';
import{GlobalContext} from '../context/GlobalState';
import {Link, useHistory} from 'react-router-dom';

import {Form,FormGroup,Label,Input,Button} from 'reactstrap';

export const EditUser = (props) => {

const {users,editEmployee } = useContext(GlobalContext);
const [selectedUser, setSelectedUser] = useState({
    id:'',
    name:'',
    nameL:'',
    email:'',
    contact:'',
    address:'',
    date:'',
   
});
const history= useHistory();
const currentUserId = props.match.params.id;
useEffect(() =>{
    const userId =(currentUserId);
    const selectedUser =users.find(user=>user.id === userId)
    setSelectedUser(selectedUser)
}, [currentUserId,users])


const onChange = (e) =>{
    setSelectedUser({...selectedUser, [e.target.name]: e.target.value})

}
const onNameL = (e) =>{
    setSelectedUser({...selectedUser, [e.target.nameL]: e.target.value})

}
const onEmail = (e) =>{
    setSelectedUser({...selectedUser, [e.target.email]: e.target.value})

}
const onContact = (e) =>{
    setSelectedUser({...selectedUser, [e.target.contact]: e.target.value})

}
const onAddress = (e) =>{
    setSelectedUser({...selectedUser, [e.target.address]: e.target.value})

}
const onDate = (e) =>{
    setSelectedUser({...selectedUser, [e.target.date]: e.target.value})

}
const onSubmit= () =>{

    editEmployee(selectedUser)
  
    history.push('/');

}


return (
    <React.Fragment>
        <Form onSubmit={onSubmit}>
            <FormGroup>
                <Label>FirstName</Label>
                <Input type="text" name="name" value={selectedUser.name} onChange={onChange} placeholder="enter first name"></Input>
                <Label>Last Name:</Label>
                <Input type="text" name="nameL" value= {selectedUser.nameL}  onChange={onNameL} placeholder="enter your Last name"></Input>
                <Label>Email:</Label>
                <Input type="email" name="email" value= {selectedUser.email}  onChange={onEmail} placeholder="Email Address"></Input>
                <Label>Contact Number:</Label>
                <Input type="number" name="contact" value= {selectedUser.contact}  onChange={onContact} placeholder="Contact"></Input>
                <Label>Address:</Label>
                <Input type="text"name="address" value= {selectedUser.address}  onChange={onAddress} placeholder="enter your Address"></Input>
                <Label>Date</Label>
                <Input type="date" name="date" value= {selectedUser.date}  onChange={onDate} placeholder="enter date employed"></Input>
            </FormGroup>
            <Button type="submit" className="btn btn-info">Edit </Button>
            <Link to="/" className="btn btn-danger">Cancel</Link>
        </Form>
    </React.Fragment>
)
}
export default EditUser;
use-state reactjs
2 Answers

In all the functions which are being used to control form fields, use the following code:

setSelectedUser({...selectedUser, [e.target.name]: e.target.value})

Also, you can just use a single function i.e. onChange, for the current implementation. There is no use in using multiple functions.

user_155438170

Welcome to the Stack Overflow Community !!!

You can do that using fewer lines of code in a very optimized manner like this. It will fix your error & make it easier to debug. Try this out.

// necessary imports 

export const EditUser = (props) => {
 const [selectedUser, setSelectedUser] = useState({
    id: "",
    name: "",
    nameL: "",
    email: "",
    contact: "",
    address: "",
    date: "",
  });

  const onChange = (e) => {
    const property = e.target.name;
    const value = e.target.value;

    setSelectedUser({
      ...selectedUser,
      [property]: value,
    });
  }; // Just have only one event for all form elements.

  return (
    <React.Fragment>
      <Form>
        <FormGroup>
          <Label>FirstName</Label>
          <Input
            type="text"
            name="name"
            value={selectedUser.name}
            onChange={onChange}
            placeholder="enter first name"
          ></Input>
          <Label>Last Name:</Label>
          <Input
            type="text"
            name="nameL"
            value={selectedUser.nameL}
            onChange={onChange}
            placeholder="enter your Last name"
          ></Input>
          <Label>Email:</Label>
          <Input
            type="email"
            name="email"
            value={selectedUser.email}
            onChange={onChange}
            placeholder="Email Address"
          ></Input>
          <Label>Contact Number:</Label>
          <Input
            type="number"
            name="contact"
            value={selectedUser.contact}
            onChange={onChange}
            placeholder="Contact"
          ></Input>
          <Label>Address:</Label>
          <Input
            type="text"
            name="address"
            value={selectedUser.address}
            onChange={onChange}
            placeholder="enter your Address"
          ></Input>
          <Label>Date</Label>
          <Input
            type="date"
            name="date"
            value={selectedUser.date}
            onChange={onChange}
            placeholder="enter date employed"
          ></Input>
        </FormGroup>
        <Button type="submit" className="btn btn-info">
          Edit{" "}
        </Button>
      </Form>
    </React.Fragment>
  );
}

Let me know if you need further support.

user_73626920
Related