React Hooks And Redux Unable To Edit Form

Question

I am trying to create an edit form using react and data stored in redux. The form helps a user update their profile but my form seems to be read only. The values i pass to the form are displaying well, but nothing happens when i change the input and try to update the state. Any recommendations/assistance on how to update the previous values stored will be appreciated.

My code :

export default function UpdateProfileSection() {

  const dispatch = useDispatch();

  const [name, setName] = React.useState("");
  const [username, setUserName] = React.useState("");
  const [email, setEmail] = React.useState("");

  const { user: currentUser } = useSelector((state) => state.auth);

  if(!currentUser) {
    return <Redirect to="/login-page" />;
  } 

  let nme = currentUser.name;
  let em = currentUser.email;
  let uname = currentUser.username;

  let id = currentUser.id; 

  const handleProfileUpdate = (e) => {
      setshowloader(true)

      dispatch(update_profile(name, username, email, role, id))
      .then((response) => {
           console.log(response);
      })
      .catch((error) => {
          console.log(error)
      })

  }    


  return (
    <div>
      <Label as="a" color="red" size="huge" ribbon style={{ marginBottom: 50 }}>
        Update Profile
      </Label>

      <CustomInput
        id="first"
        formControlProps={{
          fullWidth: true
        }}
        inputProps={{
          value: nme,
          type: "text",
          onChange: event => {
            const value = event.target.value;
            setName(value);
          }
        }}
      />

      <CustomInput
        labelText="User Name..."
        id="user"
        formControlProps={{
          fullWidth: true
        }}
        inputProps={{
          value: uname,
          type: "text",
          onChange: event => {
            const value = event.target.value;
            setUserName(value);
          }
        }}
      />

      <CustomInput
        labelText="Email..."
        id="Email"
        formControlProps={{
          fullWidth: true
        }}
        inputProps={{
          value: em,
          type: "text",
          onChange: event => {
            const value = event.target.value;
            setEmail(value);
          }
        }}
      />

      <GridItem style={{ textAlign: "center", marginTop: 10 }}>
        
        <Button 
          color="danger"
          size="lg"
          onClick={handleProfileUpdate}> 
          Save Changes
        </Button>   

      </GridItem>
    </div>
  );
}

Answer 1

The code use nme as value, and this value is the current user in the store. When you write on the input, the value doesn't change, it still being the current user info.

You can try to make an initialization by using useEffect hook, as the following:

I am trying to create an edit form using react and data stored in redux. The form helps a user update their profile but my form seems to be read only. The values i pass to the form are displaying well, but nothing happens when i change the input and try to update the state. Any recommendations/assistance on how to update the previous values stored will be appreciated.

My code :

export default function UpdateProfileSection() {

const dispatch = useDispatch();

  const [name, setName] = React.useState("");
  const [username, setUserName] = React.useState("");
  const [email, setEmail] = React.useState("");

  const { user: currentUser } = useSelector((state) => state.auth);

  if(!currentUser) {
    return <Redirect to="/login-page" />;
  } 
  useEffect( () => {
       setName(currentUser.name);
       setEmail(currentUser.email);
       setUserName(currentUser.username);
  }, []) 

  
  let id = currentUser.id; 

  const handleProfileUpdate = (e) => {
      setshowloader(true)

      dispatch(update_profile(name, username, email, role, id))
      .then((response) => {
           console.log(response);
      })
      .catch((error) => {
          console.log(error)
      })

  }    


  return (
    <div>
      <Label as="a" color="red" size="huge" ribbon style={{ marginBottom: 50 
   }}>
        Update Profile
      </Label>

      <CustomInput
        id="first"
        formControlProps={{
          fullWidth: true
        }}
        inputProps={{
          value: name,
          type: "text",
          onChange: event => {
            const value = event.target.value;
            setName(value);
          }
        }}
      />

      <CustomInput
        labelText="User Name..."
        id="user"
        formControlProps={{
          fullWidth: true
        }}
        inputProps={{
          value: username,
          type: "text",
          onChange: event => {
            const value = event.target.value;
            setUserName(value);
          }
        }}
      />

      <CustomInput
        labelText="Email..."
        id="Email"
        formControlProps={{
          fullWidth: true
        }}
        inputProps={{
          value: email,
          type: "text",
          onChange: event => {
            const value = event.target.value;
            setEmail(value);
          }
        }}
      />

      <GridItem style={{ textAlign: "center", marginTop: 10 }}>
        
        <Button 
          color="danger"
          size="lg"
          onClick={handleProfileUpdate}> 
          Save Changes
        </Button>   

      </GridItem>
    </div>
  );

}

Note that the useEffect is executed only one time when the component is mounted, and use the state values to put in the inputs. This can fix the error