CODEWITHSUNDEEP
reactjs
Zoka Ba
Zoka Ba

Reputation: 58

React router - click on card and redirect to a new page with content of that card (card details)

I have a list of cards that shows movies/TV shows. What I need is when I click on a card, it redirects me to a new page (Details page) where I can see the details of that specific movie/card.

My card.js and card-collection.js are:

card :

import React from 'react';
import './card.styles.css';

const Card = ({ item }) => (
  <div className='card-container'>
    <div
      className='image'
      style={{
        backgroundImage: `url(https://image.tmdb.org/t/p/w1280${item.backdrop_path})`,
      }}
    ></div>
    <div className='basic-info'>
      {item.name ? (
        <p className='title'>{item.name}</p>
      ) : (
        <p className='title'>{item.title}</p>
      )}

      {item.first_air_date ? (
        <p className='title'> {item.first_air_date.substring(0, 4)}</p>
      ) : (
        <p className='title'>{item.release_date.substring(0, 4)} </p>
      )}
    </div>
  </div>
);

export default Card;

card-collection:

import React from 'react';
import Card from '../card/card.component';
import './card-collection.styles.css';

class CardCollection extends React.Component {
  goToDetails = (item) => {
    localStorage.setItem('selectedItem', item);
    this.props.history.push('/details');
  };

  render() {
    console.log('PROPOVI SUUU', this.props);
    return (
      <div className='card-collection'>
        {this.props.items.data
          .filter((item, idx) => idx < 10)
          .map((item) => (
            <Card
              key={item.id}
              item={item}
              onClick={() => this.goToDetails(item)}
            />
          ))}
      </div>
    );
  }
}

export default CardCollection;

Ive tried multiple things, but I cant seem to pass my card props (i can work with only the id if nothing else), but I couldnt send that info via or anything else ive tried.

Upvotes: 2

Views: 7908

Answers (2)

ultimoTG
ultimoTG

Reputation: 953

You're passing the onClick event as a prop to the Card component. This will not capture the click event on the card item in the list. Try wrapping the Card component in an element that will capture the click. Something like this should work:

<div onClick={() => this.goToDetails(item)}>
    <Card key={item.id} item={item} />
</div>

Upvotes: 0

krabuchi
krabuchi

Reputation: 21

You need to wrap your Card component with Link tags with specified route.

<Link to="details/${id}"> <Card props={props} /> </Link>
Docs react-router Link

Upvotes: 2

Related Questions