objectObject what is this and how to avoid it?

Question

I'm currently working on a React/Ts app with a ruby on rails backend, when i try to get the data from a certain foreign key i get a unexpected response (This is the code on frontend):

const fetchRecord = async (productsResponse: any, paymentsResponse: any) => {
  const res = await api.get(`${API_PATH}/${recordId}`);
  setValue('user', { id: res.data.customer_data.id, label: res.data.customer_data.name });
  setValue('paymentGateway', res.data.payment_gateway);
  setValue('orderSdr', { id: res.data.order_sdr.id, label: res.data.order_sdr.name });
  setValue('expirationDate', res.data.expiration_date?.split('T')[0]);
  setValue('installments', res.data.installments);
  setValue('installmentSuggestion', res.data.installment_suggestion);

The line with the problem is 'orderSdr' The code for the input:

<InputLabel htmlFor="order-consultant">SDR do Pedido</InputLabel>
                      <Controller
                        name="orderSdr"
                        control={control}
                        render={({ field: { onChange, value, ...field } }) => (
                          <FormControl fullWidth>
                            <Autocomplete
                              id="order-consultant"
                              options={consultants}
                              noOptionsText="Nenhum resultado encontrado!"
                              disablePortal
                              onChange={(_, item) => onChange(item)}
                              isOptionEqualToValue={
                                (option: any, newValue: any) => option.id === newValue.id
                              }
                              value={value || null}
                              renderInput={params => (
                                <TextField
                                  {...params}
                                  {...field}
                                  size="small"
                                  color="secondary"
                                  variant="outlined"
                                  disabled={isSubmitting}
                                  error={errors.orderSdr !== undefined}
                                />
                              )}
                            />
                            {errors.orderSdr?.type && <FormHelperText error>{errors.orderSdr?.message}</FormHelperText>}
                          </FormControl>
                        )}
                      />

I'm doing something wrong? (If you need more context don't mind to ask)

Seeing "[object Object]" in the UI pretty much always means the same thing... Somewhere an *object* is being treated as a *string*. You'll need to debug specifically where/how that's happening with your data. (Or provide a runnable [mcve] which demonstrates the problem and we can help identify it.) Specifically, for the UI element in question, identify what value *should* be displayed there and debug what value is actually being used and where it came from (and why you expect it to not be an object). — David, Jul 25 '23 at 12:35
when im receiving the value it goes into this property, `value={value || null}` the value variable inside {} is from this type -> `type AutocompleteOrderSdrFormType = { id: number; label: string; }` — João Gabriel, Jul 25 '23 at 12:43
Well, that type is an object. So if you try to interpret it as a string then the result will be `"[object Object]"`. Perhaps you meant to use a specific *property* from that object somewhere? The code shown doesn't really make it clear. Though whatever `setValue` is, it seems that sometimes you give it a value and sometimes you give it an object. — David, Jul 25 '23 at 12:45
i tried to do something like this `value={value[0].label || null}`, but then typescript returns a error, when i pass the object inside the options property it accepts, so i thought that it owuld work the same, the strange part is that in the customer input that its equal to this one it works just fine. — João Gabriel, Jul 25 '23 at 12:47
`setValue` is a function that comes with the react-hook-form lib ( when i use the `useForm` hook) and it accepts both types of data, in the value i need to show to the user the label from the object, but i still need the id, because i will send it to backend. — João Gabriel, Jul 25 '23 at 12:51

objectObject what is this and how to avoid it?

0 Answers0