I have this List of albums when i click on it, I want the new Page to have the data from this album.id. I want the Information of the album with the id I clicked on in the component Cover.
Basically:
- I click on the ListItem with the album.id 61a947a868f7d778e3ee73f8
- My route /ItemPage opens
- /ItemPage has the Cover Component
- I want the Cover component to get the Information of the ListItem component
- /ItemPage renders each time with the information of the album I click on
For example :
ListItem.jsx
function ListItem({index, item}) {
const [isHovered, setIsHovered] = useState(false);
const [album, setAlbum] = useState({});
useEffect(() => {
const getAlbum = async () => {
try{
const res = await axios.get("/albums/find/" item , {
headers:{
token: "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYxOThmM2YwNzdiYzI5ZTkyZTRlZDU5MCIsImlzQWRtaW4iOnRydWUsImlhdCI6MTYzODM2MzkyNSwiZXhwIjoxNjM4Nzk1OTI1fQ.LNyVCvxwCncOWhLS_uGAXBh-WX0GQffe3CeqcMzmZK4"
},
});
setAlbum(res.data);
} catch (e) {
console.log(e)
}
};
getAlbum();
},[item])
return (
<Link to={{ pathname:"/itemPage", album:album}}>
<div className={"listItem"}
style={{left: isHovered && index * 225 - 50 index * 2.5}}
onm ouseEnter={() => setIsHovered(true)}
onm ouseLeave={() => setIsHovered(false)}>
{album.id}
.......
Now I have this album item where the id is : 61a947a868f7d778e3ee73f8
My ItemPage.jsx looks like this
const ItemPage = () => {
const [lists, setLists] = useState([]);
return (
<div className={"itemPage"}>
<Navbar/>
<Cover/>
</div>
);
};
Cover.jsx
return (
<div className={"cover"}>
<div className="coverImage">
<img src="{album.img}" alt=""/>
</div>
<div className="coverInfo">
<Card>
<CardContent>
<Typography textAlign={"center"} gutterBottom variant="h5" component="div">
</Typography>
<Typography variant="body2" color="white" textAlign={"center"} fontSize={150}>
{album.rating}
</Typography>
</CardContent>
{album.date} {album.title}
<div className="cardImages">
</div>
</Card>
</div>
<Watch/>
<Similiar/>
</div>
App.jsx Route
<Route path="/itemPage" element={<ItemPage/>}/>
CodePudding user response:
You will have to define a dynamic route for list if you want to access the id from URL App.jsx:
<Route path="/itemPage/:item" element={<ItemPage/>}/>
In ItemPage.jsx component you can use useParam hook from react-router-dom to access the selected id.
import {
} from "react-router-dom";
let { item } = useParams();
and then in itempage you can call the API to get the selected item data.