27 lines
768 B
TypeScript
27 lines
768 B
TypeScript
import React, { useEffect, useState } from "react";
|
|
import { Link, useParams } from "react-router-dom";
|
|
import { Dino } from "../../types";
|
|
|
|
export default function Dinosaur() {
|
|
const { selectedDinosaur } = useParams();
|
|
const [dinosaur, setDino] = useState<Dino>({ name: "", description: "" });
|
|
|
|
useEffect(() => {
|
|
(async () => {
|
|
const resp = await fetch(
|
|
`http://localhost:8000/dinosaurs/${selectedDinosaur}`,
|
|
);
|
|
const dino = await resp.json() as Dino;
|
|
setDino(dino);
|
|
})();
|
|
}, []);
|
|
|
|
return (
|
|
<div>
|
|
<h1>{dinosaur.name}</h1>
|
|
<p>{dinosaur.description}</p>
|
|
<Link to="/">🠠 Back to all dinosaurs</Link>
|
|
</div>
|
|
);
|
|
}
|