Retrieve data via link parameter in react - reactjs

Question

I have a list of user on a page , what i want to achieve is render user detail when i click on the link with his id. for that i have tried to send the id and retrieve the data with a new request like this :
My routes :
<Route path='/coupeurs' element={<Coupeurs />} />
<Route path='/coupeurs/add' element={<AddCoupeur />} />
<Route path='/coupeurs/:id' element={<Coupeur />} />
My list :
<ul>
{coupeurs.map(coupeur => (
<li key={coupeur.id}>
{coupeur.nom} {coupeur.prenom}
<div className='coupeur-actions'>
<Link to={`/coupeurs/${coupeur.id}`}>Voir</Link>
<Link to={`/coupeurs/${coupeur.id}/edit`}>Editer</Link>
</div>
</li>
))}
</ul>
the place where i want display details :
export default function Coupeur(props) {
console.log(props);
let { id } = useParams();
const [coupeur, setCoupeur] = useState(getCoupeurInfoById(id));
console.log(coupeur);
return (
<div>
<h3>Identifiant : {id}</h3>
<h3>Nom : {coupeur.nom}</h3>
<h3>Prenom : {coupeur.prenom}</h3>
<h3>Statut : {coupeur.statut}</h3>
</div>
)
}
My getCoupeurInfoById function :
export async function getCoupeurInfoById(id) {
const docRef = doc(db, "coupeurs", id);
const docSnap = await getDoc(docRef);
if (docSnap.exists()) {
console.log("Document data:", docSnap.data());
return docSnap.data();
} else {
// doc.data() will be undefined in this case
console.log("No such document!");
}
}
i get my page without the info , but when i console log my variable i can see the result !
Can you help me found the right way to do that kind of things ? thank you

Answer 1

Since getCoupeurInfoById is an async function it implicitly returns a Promise object and subsequently (quickly) resolves and mutates the coupeur state variable. When you log it you see the resolved value.
The useState hook expects a synchronous function that returns the initial state value.
Use a useEffect hook to handle the side-effect of fetching/computing the coupeur value.
Example:
export default function Coupeur(props) {
const { id } = useParams();
const [coupeur, setCoupeur] = useState(); // <-- initially undefined
useEffect(() => {
const getCoupeur = async () => {
try {
const coupeur = await getCoupeurInfoById(id);
setCoupeur(coupeur);
} catch(error) {
// handle any rejections/errors/etc
}
};
getCoupeur(); // <-- fetch/compute coupeur value
}, [id]);
if (!coupeur) return null; // or loading indicator/etc
return (
<div>
<h3>Identifiant : {id}</h3>
<h3>Nom : {coupeur.nom}</h3>
<h3>Prenom : {coupeur.prenom}</h3>
<h3>Statut : {coupeur.statut}</h3>
</div>
)
}