Input doesn't change the value in reactjs

Question

Problem

I'm working on project using reactjs and graphql with apollo client. I'm trying to get user by id and it works, the value shows in the form modal.

But, I can't delete or add the text or content inside form input.

I'm using onChange handler but it doesn't work. here's the code

import React, { useEffect, useState } from "react";
import { useMutation, useQuery } from "@apollo/client";
import { Button, Modal, Form } from "react-bootstrap";

import { GET_USER_BY_ID } from "../../../gql/query";

const ModalEdit = (props) => {
    // state for check input component
    const [isChecked, setIsChecked] = useState('ACTIVE');
    const [value, setValue] = useState({
      full_name: "",
      email: "",
      phone: "",
      address: "",
      password: "",
      group_id: "",
    });

    useEffect(() => {
        if (props.show) {
        document.body.classList.add("modal-open");
        }

        return () => {
            if (document.body.classList.contains("modal-open")) {
                document.body.classList.remove("modal-open");
            }
        };
  }, [props.show]);

  const { data, loading, error } = useQuery(GET_USER_BY_ID, {
    variables: { username: props.username },
  });

  const dataUser = data?.getUserByID;

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error!</p>;

  const onChange = (event) => {
    setValue({
      ...value,
      [event.target.name]: event.target.value
    })
  }

  return (
    <Modal show={props.show}>
      <Modal.Header>
        <Modal.Title> <span>FORMULIR AKUN PENGGUNA</span> </Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <Form>
            <Form.Group className="mb-3">
                <Form.Label>Role Akun</Form.Label>
                <Form.Select aria-label="pilih user role">
                    <option>{dataUser.group_id}</option>
                    <option>Admin RJ</option>
                </Form.Select>
            </Form.Group>
            <Form.Group className="mb-3">
                <Form.Label>Nama Lengkap</Form.Label>
                <Form.Control name="full_name" value={dataUser.full_name} onChange= {onChange} />
            </Form.Group>
            <Form.Group className="mb-3">
                <Form.Label>Email</Form.Label>
                <Form.Control type="email" name="email" value={dataUser.email} onChange={ onChange }/>
            </Form.Group>
            <Form.Group className="mb-3">
                <Form.Label>Phone</Form.Label>
                <Form.Control type="text" name="phone" value={dataUser.phone} onChange={ onChange } />
            </Form.Group>
            <Form.Group className="mb-3">
                <Form.Label>Address</Form.Label>
                <Form.Control type="text" name="address" value={dataUser.address} onChange={ onChange } />
            </Form.Group>
            <Form.Group className="mb-3">
                <Form.Label>Password</Form.Label>
                <Form.Control type="password" name="password" value={dataUser.password} onChange={ onChange } />
            </Form.Group>
            <Form.Label>Aktifkan Akun</Form.Label>
            {dataUser.status === 'ACTIVE' ? (  
            <Form.Check 
                type="switch"
                checked={isChecked}
                onChange={(event) => setIsChecked(event.target.checked)}
                id="custom-switch"
                label="Aktifkan Akun"
            /> ) :  (
                <Form.Check 
                    type="switch"
                    id="custom-switch"
                    checked={isChecked}
                    onChange={(event) => setIsChecked(event.target.checked)}
                    label="Aktifkan Akun"
                />
            )}       
        </Form>
      </Modal.Body>
      <Modal.Footer>
        <Button variant="primary" type="submit" >Submit</Button>
        <Button variant="secondary" onClick={props.onClose}>
          Close
        </Button>
      </Modal.Footer>
    </Modal>
  );
};

export default ModalEdit;

Question How can i'm edit the form input?

Any help will be apprieciated, thank you

Answer 1

The value prop of your inputs are causing this issue. Instead of binding the value directly to dataUser.address and such, you should set them to value.address and so on.

As for showing the user's data, you should map the values when creating the state.

Your state should be as follows:

const [value, setValue] = useState({
  full_name: dataUser.full_name,
  email: dataUser.email,
  phone: dataUser.phone
  address: dataUser.address,
  password: dataUser.password,
  group_id: dataUser.group_id,
});

And your input should be as follows:

<Form.Control name="full_name" value={value.full_name} onChange= {onChange} />