0
215
ViewsWhy am I getting undefined from a string that has data?
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
required id="Field1"
defaultValue={Tenant.tenantName}
label="Tenant Name"
variant="outlined"
onChange={(event) => {setNtenantName(event.target.value)}}
/>
But, I was not getting anything. So I decided to console.log(Tenant.tenantName) and was getting this in my console:
·
Juan Pablo Isaza
2 answers
Answer question0
Your state is not ready by the time you're trying to access it.
So you can check for it.
{Tenant && (
<TextField
required id="Field1"
defaultValue={Tenant.tenantName}
label="Tenant Name"
variant="outlined"
onChange={(event) => {setNtenantName(event.target.value)}}
/>
)}
also on a side note it's not common to capitalize your state names.
u can change it to : const [tenant, setTenant] = useState("");
just for convention
·
Juan Pablo Isaza
Report
0
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
required id="Field1"
defaultValue={Tenant.tenantName}
label="Tenant Name"
variant="outlined"
onChange={(event) => {setNtenantName(event.target.value)}}
/>
)
·
Juan Pablo Isaza
Report
Answer question