Redirect to component after onClick

Question

I'm creating a shelter finder web app with a simple API as a project, I'm mapping trough an array of shelters and generating a ShelterCard that contains basic info about it, I had an idea and there is a lot of Data on the API that would remain unused so I wanted to implement some type of onClick that takes you to a bigger component with more information about the specific shelter, I haven't done this before so I'm unsure on how to implement this functionality. My idea could be using something like the shelter id on the params and then use that with the ShelterProfile to display the complete info. So far I haven't been able to even console.log something when I click each card so I need to know first how to implement that onClick . I'm using react-router for the routes and react-query to fetch the data. I'm open to any different ideas on approaching this.

export const ShelterComponent = () => {
    const history = useHistory()
    console.log(history)
    async function fetchData() {
        const response = await fetch(SHELTER_URL)
        const data = await response.json()
        return data
    }
    const {status, data, error} = useQuery("shelter", fetchData)
    // const {features} = data
    if(status==="loading"){return <p>Loading </p>}
    if(error) return <p>something went worng...</p>
    if(data)
    return (
        <>         
     {data.features.map((shelter, i)=> {  
           return <ShelterCard key ={i} shelter={shelter}/>
       })}
    </>
    )
} 

Answer 1

It seems like you want to implement something like a Netflix home screen. when you click on any movie card the bigger popup opens with more information about the same movie or series.

instead of redirecting it to another page here's what you can do. maintain one selectedShelterId state and initially set it to "false".

const [selectedShelterId,setSelectedShelterId]=useState(false)

add onClick to all cards and whenever the user clicks on any card set the selectedShelterId to the shelter id which is on the shelter card.

 {data.features.map((shelter, i)=> {  
       return (
              <div onClick={()=>setSelectedShelterId(shelter.id)}> 
                 <ShelterCard key ={i} shelter={shelter}/>
              </div>
              )
       })}

create on components (eg. ShelterInfoPopup) where you can pass this selectedShelterId as a prop and with that id you can make an API call to get and display the shelter info as you want.

and make this ShelterInfoPopup component fixed on top of the page and it should be only opened when there is a selectedShelterId.

{selectedShelterId && <ShelterInfoPopup shelterID={selectedShelterId}/>}

and add one cross or some sort of option on a popup with that can close the popup. for that, you need to set the selectedShelterId as a false.

you can make use of useEffect and query params to make it more dynamic and maintain selectedShelterId in query params. to open the page with popup opened already.