Data not displayed in compenent

Unanswered

Swedish Lapphund posted this in #help-forum

Swedish LapphundOP

2024-01-11T09:37:01.000Z

So I am using my api client to receive data from the backend, currently before the return with my html code i use console.log() and can see my data being initialized properly.

105 Replies

Swedish LapphundOP

2024-01-11T09:37:16.000Z

is in my browser, it shows the data I fetched from the server

  console.log(profileData);
  
  return (  
            <TextField
              label="Voornaam"
              value={profileData?.firstName}
              onChange={(e) => updateProfileData("firstName", e.target.value)}
              fullWidth
              margin="normal"
              disabled={!editMode}
            />
            <TextField
              label="Achternaam"
              value={profileData?.lastName}
              onChange={(e) => updateProfileData("lastName", e.target.value)}
              fullWidth
              margin="normal"
              disabled={!editMode}
            />

but it does not display on the page

@Swedish Lapphund ts console.log(profileData); return ( <TextField label="Voornaam" value={profileData?.firstName} onChange={(e) => updateProfileData("firstName", e.target.value)} fullWidth margin="normal" disabled={!editMode} /> <TextField label="Achternaam" value={profileData?.lastName} onChange={(e) => updateProfileData("lastName", e.target.value)} fullWidth margin="normal" disabled={!editMode} />

Ray

2024-01-11T09:42:29.000Z

try this

<TextField
    label="Voornaam"
    defaultValue={profileData?.firstName}
    onChange={(e) => updateProfileData("firstName", e.target.value)}
    fullWidth
    margin="normal"
    disabled={!editMode}
  />

@Ray try this ts <TextField label="Voornaam" defaultValue={profileData?.firstName} onChange={(e) => updateProfileData("firstName", e.target.value)} fullWidth margin="normal" disabled={!editMode} />

Swedish LapphundOP

2024-01-11T09:44:56.000Z

Mhm, same thing, it does not seem to use my profileData.firstName

I re-ran it to be sure

@Swedish Lapphund Mhm, same thing, it does not seem to use my profileData.firstName

Ray

2024-01-11T09:46:32.000Z

could you show more code?

Swedish LapphundOP

2024-01-11T09:47:11.000Z

https://pastebin.com/FQfWSWJm

here's all, not sure what could be it so I'll show all of it

if you need my states too let me know, though it shouldnt be an issue since it fetches properly

Ray

2024-01-11T09:48:15.000Z

could you show the code for how you fetch profileData?

Swedish LapphundOP

2024-01-11T09:48:41.000Z

export default function ViewProfile() {
  const [profileData, setProfileData] = useState<PanelProfileDto | undefined>();
  const [error, setError] = useState<ErrorResponse | undefined>(undefined);

  useEffect(() => {
    apiClient.panel.profile
      .get()
      .then((data) => {
        setProfileData(data);
      })
      .catch((error) => {
        if (error instanceof ErrorResponse) {
          console.log(error);
          setError(error);
        }
      });
  }, []);

  const updateProfileData = (field: any, value: any) => {
    setProfileData((prevData: any) => ({
      ...prevData,
      [field]: value,
    }));
  };

Ray

2024-01-11T09:48:44.000Z

TextField is from mui?

Swedish LapphundOP

2024-01-11T09:48:56.000Z

yepp

  async get() {
        return await this.http.get<PanelProfileDto>('/panel/profile');
    }

export interface PanelProfileDto {
    userid: string;
    profileId: string;
    firstName: string;
    lastName: string;
    email: string;
    phoneNumber: string;
    postalCode: string;
    specialDataId: string;
    created_at: string;
    updated_at: string;
    sensitiveData: SensitiveDataDto;
}

is my dto

@Swedish Lapphund ts async get() { return await this.http.get<PanelProfileDto>('/panel/profile'); }

Ray

2024-01-11T09:49:56.000Z

do you see the value if you type in the input?

Swedish LapphundOP

2024-01-11T09:50:03.000Z

yes

and it saves it too

I click edit, and then I can type and it saves it just fine

so changing the data works, for those two that is, the others dont work for other reasons im aware of

but none of them display the data I get from the server

@Swedish Lapphund but none of them display the data I get from the server

Ray

2024-01-11T09:54:44.000Z

try this

 const [profileData, setProfileData] = useState<PanelProfileDto | undefined>({
   firstName: "",
   lastName: ""
 });

Swedish LapphundOP

2024-01-11T09:55:34.000Z

I'd need to define them all, can do, one moment

Swedish LapphundOP

2024-01-11T10:03:46.000Z

  const [profileData, setProfileData] = useState<PanelProfileDto | undefined>({
    firstName: "",
    lastName: "",
    userid: "",
    profileId: "ads",
    email: 'string',
    phoneNumber: 'string',
    postalCode: 'string',
    specialDataId: 'string',
    created_at: 'string',
    updated_at: "tring",
    sensitiveData: {     preferredInterviewType: "sd",
      preferredApproachType: 'string',
      commercialApproaches: true,
      assistanceTools: new Array<AssistanceToolDto>,
      availabilityMoments: new Array<AvailabilityMomentDto>,
      disabilities: new Array<DisabilityDto> }
  });

i got this now, it does not change anything sadly

still empty

@Swedish Lapphund ts const [profileData, setProfileData] = useState<PanelProfileDto | undefined>({ firstName: "", lastName: "", userid: "", profileId: "ads", email: 'string', phoneNumber: 'string', postalCode: 'string', specialDataId: 'string', created_at: 'string', updated_at: "tring", sensitiveData: { preferredInterviewType: "sd", preferredApproachType: 'string', commercialApproaches: true, assistanceTools: new Array<AssistanceToolDto>, availabilityMoments: new Array<AvailabilityMomentDto>, disabilities: new Array<DisabilityDto> } });

Ray

2024-01-11T10:04:31.000Z

does the TextField look like this now?

 <TextField
      label="Voornaam"
      value={profileData?.firstName}
      onChange={(e) => updateProfileData("firstName", e.target.value)}
      fullWidth
      margin="normal"
      disabled={!editMode}
    />

@Ray does the TextField look like this now? ts <TextField label="Voornaam" value={profileData?.firstName} onChange={(e) => updateProfileData("firstName", e.target.value)} fullWidth margin="normal" disabled={!editMode} />

Ray

2024-01-11T10:05:23.000Z

oh use value instead of defaultValue

Swedish LapphundOP

2024-01-11T10:05:29.000Z

yes, just changed it back from the defaultValue

            <TextField
              label="Voornaam"
              value={profileData?.firstName}
              onChange={(e) => updateProfileData("firstName", e.target.value)}
              fullWidth
              margin="normal"
              disabled={!editMode}
            />
            <TextField
              label="Achternaam"
              value={profileData?.lastName}
              onChange={(e) => updateProfileData("lastName", e.target.value)}
              fullWidth
              margin="normal"
              disabled={!editMode}
            />

could it be because it's nullable?

Ray

2024-01-11T10:06:19.000Z

const [profileData, setProfileData] = useState<PanelProfileDto | undefined>({
    firstName: "123",
    lastName: "",
    userid: "",
    profileId: "ads",
    email: 'string',
    phoneNumber: 'string',
    postalCode: 'string',
    specialDataId: 'string',
    created_at: 'string',
    updated_at: "tring",
    sensitiveData: {     preferredInterviewType: "sd",
      preferredApproachType: 'string',
      commercialApproaches: true,
      assistanceTools: new Array<AssistanceToolDto>,
      availabilityMoments: new Array<AvailabilityMomentDto>,
      disabilities: new Array<DisabilityDto> }
  });

do you see 123 appear in firstname field?

Swedish LapphundOP

2024-01-11T10:07:09.000Z

YES

but scuffed

it does not move the label up

Ray

2024-01-11T10:07:28.000Z

or try add this before the return

if (!profileData) return <div>loading...</div>

Swedish LapphundOP

2024-01-11T10:08:04.000Z

why do i feel like I have to call onChange to make this work

@Ray or try add this before the return ts if (!profileData) return <div>loading...</div>

Swedish LapphundOP

2024-01-11T10:08:14.000Z

done, does not change anything

@Ray ts const [profileData, setProfileData] = useState<PanelProfileDto | undefined>({ firstName: "123", lastName: "", userid: "", profileId: "ads", email: 'string', phoneNumber: 'string', postalCode: 'string', specialDataId: 'string', created_at: 'string', updated_at: "tring", sensitiveData: { preferredInterviewType: "sd", preferredApproachType: 'string', commercialApproaches: true, assistanceTools: new Array<AssistanceToolDto>, availabilityMoments: new Array<AvailabilityMomentDto>, disabilities: new Array<DisabilityDto> } }); do you see `123` appear in firstname field?

Ray

2024-01-11T10:08:35.000Z

comment this out
and put back this

  const [profileData, setProfileData] = useState<PanelProfileDto | undefined>();

@Ray or try add this before the return ts if (!profileData) return <div>loading...</div>

Ray

2024-01-11T10:08:43.000Z

with this

Swedish LapphundOP

2024-01-11T10:09:52.000Z

Ray

2024-01-11T10:10:02.000Z

ðŸ‘€

Swedish LapphundOP

2024-01-11T10:10:06.000Z

now its just empty like before

i could call onChange

in value

its a bit scuffed

it'd work probably

Ray

2024-01-11T10:10:30.000Z

you can change the value when you type right?

Swedish LapphundOP

2024-01-11T10:10:33.000Z

yes

my onChange works perfectly

its just the initial value

its almost as if MUI text field does not allow

a default value

the label is messed up if i dont type text myself

Ray

2024-01-11T10:11:07.000Z

try changing one of the TextField to input

Swedish LapphundOP

2024-01-11T10:11:29.000Z

the html tag input you mean?

Ray

2024-01-11T10:11:32.000Z

yep

Swedish LapphundOP

2024-01-11T10:11:34.000Z

kk sec

Ray

2024-01-11T10:11:38.000Z

see if it works

Swedish LapphundOP

2024-01-11T10:20:56.000Z

<input text={profileData?.firstName}></input>

like this?

@Swedish Lapphund `<input text={profileData?.firstName}></input>`

Ray

2024-01-11T10:21:35.000Z

<input value={profileData?.firstName} onChange={(e) => updateProfileData("firstName", e.target.value)} />

Swedish LapphundOP

2024-01-11T10:22:41.000Z

even that does not work

@Swedish Lapphund tsx export default function ViewProfile() { const [profileData, setProfileData] = useState<PanelProfileDto | undefined>(); const [error, setError] = useState<ErrorResponse | undefined>(undefined); useEffect(() => { apiClient.panel.profile .get() .then((data) => { setProfileData(data); }) .catch((error) => { if (error instanceof ErrorResponse) { console.log(error); setError(error); } }); }, []); const updateProfileData = (field: any, value: any) => { setProfileData((prevData: any) => ({ ...prevData, [field]: value, })); };

Ray

2024-01-11T10:23:34.000Z

add a console.log(profileData)

Swedish LapphundOP

2024-01-11T10:25:12.000Z

this is right before the return statement

I can print it on the page too, let me try

            <p>{profileData?.firstName}</p>
            <input value={profileData?.firstName} onChange={(e) => updateProfileData("firstName", e.target.value)} />

its empty

Ray

2024-01-11T10:27:13.000Z

ðŸ‘€

Swedish LapphundOP

2024-01-11T10:27:17.000Z

but a console log right before the return

gives me

the data

Ray

2024-01-11T10:27:44.000Z

<p>{JSON.stringify(profileData,null,2)}</p>

Swedish LapphundOP

2024-01-11T10:27:44.000Z

its like its a different state or smth

Ray

2024-01-11T10:28:03.000Z

try render this

Swedish LapphundOP

2024-01-11T10:28:07.000Z

that works with my data

Ray

2024-01-11T10:28:26.000Z

firstname

not firstName

Swedish LapphundOP

2024-01-11T10:30:21.000Z

klsdjfkds

broooooo aint no fucking way

my Dto has firstName

but we get it as a firstname

@Swedish Lapphund Click to see attachment

Ray

2024-01-11T10:30:43.000Z

and lastname here too

Swedish LapphundOP

2024-01-11T10:30:44.000Z

so it doesnt map

yepp

im so sorry mate for wasting your time, this is so stupid

my .get() does not throw an error when the json isnt mappe dproperly to my type

and I didnt notice

Ray

2024-01-11T10:33:50.000Z

no worries

Swedish LapphundOP

2024-01-11T10:54:31.000Z

any idea how I could solve this btw

when I click in it, it will put the label at the top, but when I leave the field itll overlap like this again

@Swedish Lapphund when I click in it, it will put the label at the top, but when I leave the field itll overlap like this again

Ray

2024-01-11T10:55:29.000Z

try pass the value as key to it

or try this

 <TextField
  label="Voornaam"
  value={profileData?.firstName || ''}
  onChange={(e) => updateProfileData("firstName", e.target.value)}
  fullWidth
  margin="normal"
  disabled={!editMode}
/>