How it is possible to get the first object from the response data, and store that in a state?
I've tried something like this, where i use the setData and store the data's first object to it:
export default function BuildingsDetail({buildingId}) {
const [data, setData] = useState({});
const navigate = useNavigate();
useEffect(()=> {
if (!localStorage.getItem('token')) {
navigate('/login');
} else {
fetch(Config.domain + 'kingdom/buildings/:'+buildingId, {
headers: {'Authorization': 'Bearer '+localStorage.getItem('token')}
})
.then(res=>res.json())
.then(data => {
setData(data[0]);
})
}
}, [buildingId])
console.log(data);
return(
<div className='container'>
<div className='building-details'>
<img />
<p></p>
<p></p>
{data.type === 'Academy' ? <BuildingsButton type={data.type} level={data.level}/> : ''}
<BuildingsButton type={data.type} level={data.level}/>
</div>
</div>
);
I'm getting undefined errors for data.type, which i can't understand since it should be an object which has a 'type' key to it.
Also when im logging out data, it says undefined.
The response from postman is the following:
[
{
"id": 63,
"kingdom_id": 31,
"type": "Academy",
"level": 1,
"hp": 100,
"started_at": 1642410594584,
"finished_at": 1642410654584
}
]
I think that the problem is that you are trying to display data before it's loaded by the fetch call.
Change your state default value to null:
const [data, setData] = useState(null);
And add a condition to check if the data state is present before rendering the page:
if (!data) {
return <>Loading data...</>
}
return (
<div className='container'>
<div className='building-details'>
<img />
<p></p>
<p></p>
{data.type === 'Academy' ? (
<BuildingsButton type={data.type} level={data.level} />
) : (
''
)}
<BuildingsButton type={data.type} level={data.level} />
</div>
</div>
);
It should prevent the error.