How React pass props from api to component? - reactjs

Question

I have a parentA and childB component
I want it click a button in parentA
then execute function to get data from api
then show on B component. that seems simple.
parent:
let profileData = {
avatar: '',
first_name: 'hey',
...
};
const handleClickProfileOpen = () => {
setIsProfileOpen(true);
getProfileData();
};
const getProfileData = async() => {
let res;
try {
res = await....;
if (res.code === 200) {
profileData = res.data.data;
...
} else {
...
}
} catch...
};
return (
<>
<UserInfo openProfilePage={ handleClickProfileOpen } />
<Profile profileData={profileData} />
</>
)
child(profile)
export default function Profile({profileData}) {
return (
<>
<p>{profileData.first_name}</p>
</>
)}
and I run it, the profileData is not re-render when called API, the last_name is always 'hey',
I tried setState in getProfileData code === 200, but cause error
Can't perform a React state update on an unmounted component.
I'm a new react programer, if you answer, I appreciate it.

Answer 1

Assuming you are using functional component, you can use useState from react, refer to https://reactjs.org/docs/hooks-state.html
E.g.,
function ParentComponent() {
const [profileData, setProfileData] = useState({
// default value if you needed, otherwise use `null`
avatar: '',
first_name: 'hey',
...
})
const handleClickProfileOpen = () => {
setIsProfileOpen(true);
getProfileData();
};
const getProfileData = async() => {
let res;
try {
res = await....;
if (res.code === 200) {
setProfileData(res.data.data);
...
} else {
...
}
} catch...
};
return (
<>
<UserInfo openProfilePage={ handleClickProfileOpen } />
<Profile profileData={profileData} />
</>
)
}
Above is the easiest way to handle simple react state, you can find other state management libraries when you state become more complicated.