React.js send id from or pass props to other component

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}}
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => 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/>}/>

Answer

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.

Advertisement

Answer