Can't type in TextField Input from React Material-ui

Question

I am working on the update form of my react project. I just want to display the current states in my update form, and the user will be able to update the current values. So as the input field I used React Material UI TextField. I fetch the data from the backend and use value prop to set the current values for each input field.

Here is my code :

const EditRoles = () => {
  const { idrole } = useParams();
  const history = useNavigate();

  const [roleData, setRoleData] = useState([]);

  const [RoleName, setRoleName] = useState();
  

  //role info
  useEffect(() => {
    axios.get(`http://localhost:3001/role/view/${idrole}`).then((response) => {
      setRoleData({ ...response.data[0] });
    });
  }, [idrole]);

 

  const EditRole = async (idrole) => {
    await axios
      .put('http://localhost:3001/role/edit', {
        roleName: RoleName,
        description: Description,
        idrole: idrole,
      })
      .then(() => {
        swal({
          text: 'Role updated successfully',
          icon: 'success',
          timer: 6000,
          buttons: false,
        });
      });
    setRoleName('');
    setDescription('');
  };

  

  return (
    <>
      <div className="formPage">
        <Header title="Edit Role" />
        <div className="FormContainer">
          <form
            onSubmit={() => {
              EditRole(idrole);
            }}
          >
            <FormLabel color="success" required="true" className="label">
              Role Name
            </FormLabel>
            <br />

            <TextField
              style={{ paddingBottom: '30px' }}
              variant="outlined"
              fullWidth
              name="roleName"
              onChange={(e) => {
                setRoleName(e.target.value);
              }}
              value={roleData.roleName}
            />

            <br />
           
            <div style={{ paddingTop: '50px' }}>
              <span style={{ paddingLeft: '55%' }}>
                <Button
                  variant="contained"
                  color="info"
                  type="submit"
                  
                >
                  Save
                </Button>
              </span>

              <span style={{ paddingLeft: '10%' }} onClick={() => history(-1)}>
                <Button variant="contained" color="secondary">
                  <ArrowBackIosNewIcon fontSize="small" />
                  Back
                </Button>
              </span>
            </div>
          </form>
        </div>
      </div>
    </>
  );
};

export default EditRoles;

So in my case data is fetched and display successfully in TextField using value but I cannot type inside the TextField. If I use defaultValue the faetched data will not show in the textfield.

Could someone help me understand what I need to do to solve my problem?

Answer 1

I think that's because you are updating RoleName in onChange and you are using roleData.roleName in value field.
There are two ways to solve this issue.

1. In useEffect change setRoleData({ ...response.data[0] }); to setRoleName(response.data[0].roleName);
   
   OR
   
   
2. In onChange change setRoleName(e.target.value); to setRoleData({ ...roleData, roleName: e.target.value });