[FIXED] Why am I getting undefined from a string that has data?

Issue

So I am pulling data from my database using an API with this code:

let { id } = useParams();
const [Tenant, setTenant] = useState("");
useEffect(() => {
  axios.get(`http://localhost:3001/tenants/byId/${id}`).then((response) => {
    setTenant(response.data);
  });
}, []);

I then try to set a default value on my Material UI textfield using:

<TextField 
    id="Field1" 
    defaultValue={Tenant.tenantName}
    label="Tenant Name" 
    variant="outlined" 
    onChange={(event) => {setNtenantName(event.target.value)}}
    required
/>

But, I was not getting anything. So I decided to console.log(Tenant.tenantName) and was getting this in my console:

Solution

What Kevin is proposing should work well, but you can also do something like so, which it might be easier to read and will display a loader while is fetching the data..

if(Tenant === undefined) return <div>Loading data....</div> 
else return (
  <TextField 
     id="Field1" 
     defaultValue={Tenant.tenantName}
     label="Tenant Name" 
     variant="outlined" 
     onChange={(event) => setNtenantName(event.target.value)}
     required 
  />
)

Answered By - Gass
Answer Checked By - - Pedro (ReactFix Volunteer)