I made the request in the global state and now I want to use it to display the data when opening the option to edit the table, but when I try to call the object inside the useForm, it returns an undefined value.

When I console user[0].name, it returns the data I need, but when I try to put this value on the form object, the value turns into undefined.

Is there an especific way to put the data inside the form?

function GlobalState(props) {

    const [getId, setGetId] = useState('')

    const user = useRequestData([], `${BASE_URL}?id=${getId}`)

    const data = {
        getId,
        setGetId,
        user
    }

    return(
        <GlobalStateContext.Provider value={data}>
            {props.children}
        </GlobalStateContext.Provider>
    )
}

function DataTable() {
  const { users, filterData, showUserBy, setGetId } = useContext(GlobalStateContext);
  const [open, setOpen] = useState(false)


  const handleOpenModal = (id) => {
    setOpen(true);
    setGetId(id)
  };

  return (
    <div>
        
      <TableContainer>
        <table>
          <thead>
          </thead>
          <tbody>
            {users
              .map((user: any) => (
                <tr key={user.id}>
                  <td>
                    <IconButton onClick={() => handleOpenModal(user.id)}>
                      <EditRoundedIcon />
                    </IconButton>

                    <IconButton onClick={() => deleteClient(user.id)}>
                      <DeleteOutlineRoundedIcon />
                    </IconButton>
                  </td>
                </tr>
              ))}
          </tbody>
        </table>
      </TableContainer>
      <Modal
        open={open}
        aria-labelledby="modal-modal-title"
        aria-describedby="modal-modal-description"
      >
        <EditUser
        />
      </Modal>
    </div>

)


function EditUser(){

    const {user} = useContext(GlobalStateContext)

    const [nameUser, setName] = useState(user[0]?.name)
    
    const [form, handleInputChange, clear] = useForm({
        name: nameUser,
        company: "",
        email: "",
        phone: "",
        adress: "",
        note: "",
        isActive: true,
      });

      const onSubmitForm = (e: any) => {
        e.preventDefault();
        createUser();
      };
  
    
    return(
        <>{user === [] ? <h4>Loading...</h4> : 
        <CreateUserModal>
        <FormContainer>
          <FormHeader>
            <HeaderButton>
              <IconButton 
            //   onClick={props.onClose}
              >
                <CloseIcon />
              </IconButton>
            </HeaderButton>
            <FormTitle>
              <h3>Data</h3>
              <hr />
            </FormTitle>
          </FormHeader>
          <form onSubmit={onSubmitForm}>
            <InputContainer>
              <TextField
                name={"name"}
                value={form.name}
                onChange={(handleInputChange)}
                required
                color="secondary"
                margin="normal"
              />
              <TextField
                name={"company"}
                value={form.company}
                onChange={handleInputChange}
                color="secondary"
                margin="normal"
              />
</InputContainer>
</FormContainer>

CodePudding user response：

It seems that you're request isn't completed the first time you render EditUser. This means that the first time the component renders we have user[0] being undefined. Directly after that the request is completed and user[0] gets a value. The code in EditUser (including the snippet below) is run twice, first with user[0] being undefined, and then again with the value.

What causes the error here is that the argument passed in to useState is only used the first time, after that the state can only be changed with the setState function. So nameUser is set to undefined on first render and not modified after that.

If you want to update the state when user[0] changes, you can use a useEffect. This snippet tells react to update the state whenever user[0] changes (second argument to useEffect).

useEffect(() => {
  setName(user[0]?.name)
}, [user[0]]);