display empty form while loading data in react - reactjs

Question

Ok, newbie alert, but I have a react component like below. I want to load user object and then show user.name and possible other nested properties, like user.address.street.
const ProfileDisplay =()=>
{
const [user, setUser] = useState(null);
useEffect(()=>{
async function populate(){
const user = await fetch('server/getUserProfile/'...);
setUser(user)
}
populate();
},[whatevs])
return (<FancyLookingForm>...<span>Your name is {user.name}</span>...</FancyLookingForm>);
}
...
During the time the user-object is loaded I want the form to be displayed, but empty. The alternatives I see is either create a dummy object that looks like the one that will come from the server and use that as init object to useState(). The other alternative is to use an if null-check on every place I use the user-object.
I will do quite alot of forms, so I want to check if there is a better way to do this?

Answer 1

I have written a utility function that will help you.
/**
* object is the forms data container in your example user
* property is field name e.g. name, age
*/
function getPropertryValue(object, property) {
if(!object) return "";
const keys = Object.keys(object);
const keysLength = keys.length;
for(let i= 0; i < keysLength; i++) {
const key = keys[i];
if(key == property) {
return object[key];
}
if(typeof object[key] === 'object'){
return utilFindHas(object[key], property);
}
}
return "";
};
So instead of using {user.name} use getPropertyValue(user, "name")
It will return empty string if it doesn't exist yet.