Showing Data in React Native with useParams - reactjs

Question

I've the following question, how can I display the data in react-native with useparams? I've the following code snippet in my Details.jsx
import React from 'react'
import {useParams} from 'react-router-dom'
const Details = () => {
const userData = JSON.parse(localStorage.getItem('user'))
const token = userData ? userData.accessToken : null
const params = useParams()
const [load, setLoad] = React.useState(false)
const getAccountDetails = React.useCallback(async () => {
setLoad(true)
await fetch (`http://localhost:4000/api/account/findonecard/${params.idCard}`, {
headers: {
'Authorization': `Bearer ${token}`
}
}).then(res => res.json()).then(response=>{
console.log(response)
//My response drops the data I need
})
}, [])
React.useEffect(() => {
getAccountDetails()
}, [getAccountDetails])
return (
<>
<div>Details</div>
{
!load ?
(
<Detail card={{
username: card.fullname,
description: card.description,
mainPic: card.pic_profile,
userTags: card.usertags
}} />
)
:
(
<div style={{ position: 'relative', zIndex: 99, color: '#000000', fontFamily: 'sans-serif', textAlign: 'center', margin: '60px auto' }}>No Card to show</div>
)
}
</>
)
}
export default Details
This releases an object with my data, such as photo, description, name, etc.
Although I tried to loop through the object, I can't display the data on my Front, what am I missing?
This is my Detail.jsx
const Detail = ({ card }) => {
return (
<div className="content">
<div className="content_card-container">
<ShowMore/>
<h2 className="content_card-username">{card.username}</h2>
<div
className="content_card-image"
style={{
backgroundImage:
`url(${card.cardImg})`
}}
/>
<div className="content_tags-slider">
<SliderComponent tags={card.userTags} />
</div>
</div>
<div className="content_user-description">
<p className="content_user-description-text">{card.description}</p>
</div>
<div className="content_choice-container">
<img src={Dislike} alt="" className="content_choice-icon" />
<img src={Like} alt="" className="content_choice-icon" />
</div>
</div>
);
};

Answer 1

To keep track of the account details we'll create a state.
const [accountDetails, setAccountDetails] = useState({});
In the getAccountDetails function you can set the state with the received data from the api. You're also mix 'n matching await and then, you should use one. Lets go with await for this one
const getAccountDetails = React.useCallback(async () => {
setLoad(true);
const response = await fetch(
`http://localhost:4000/api/account/findonecard/${params.idCard}`,
{
headers: {
Authorization: `Bearer ${token}`,
},
}
);
const data = await response.json();
// console.log(data);
setAccountDetails(data);
setLoad(false); // set load to false
}, []);
When passing the card data down to the Detail component we can use the accountDetails like so
<Detail
card={{
username: accountDetails.fullname,
description: accountDetails.description,
mainPic: accountDetails.pic_profile,
userTags: accountDetails.usertags,
}}
/>
You maybe want to set the initital state of load to true