Skip to content

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 I want the Information of the album with the id I clicked on in the component Cover.


  1. I click on the ListItem with the 61a947a868f7d778e3ee73f8
  2. My route /ItemPage opens
  3. /ItemPage has the Cover Component
  4. I want the Cover component to get the Information of the ListItem component
  5. /ItemPage renders each time with the information of the album I click on

For example :


function ListItem({index, item}) {
const [isHovered, setIsHovered] = useState(false);
const [album, setAlbum] = useState({});

useEffect(() => {
    const getAlbum = async () => {
            const res = await axios.get("/albums/find/" + item , {
                    token: "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYxOThmM2YwNzdiYzI5ZTkyZTRlZDU5MCIsImlzQWRtaW4iOnRydWUsImlhdCI6MTYzODM2MzkyNSwiZXhwIjoxNjM4Nzk1OTI1fQ.LNyVCvxwCncOWhLS_uGAXBh-WX0GQffe3CeqcMzmZK4"
        } catch (e) {

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)}>



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"}>



return (
        <div className={"cover"}>
            <div className="coverImage">
                <img src="{album.img}" alt=""/>
            <div className="coverInfo">
                        <Typography textAlign={"center"} gutterBottom variant="h5" component="div">
                        <Typography variant="body2" color="white" textAlign={"center"} fontSize={150}>
                        {} {album.title}
                        <div className="cardImages">

App.jsx Route

<Route path="/itemPage" element={<ItemPage/>}/>


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.