'Reuse Card in reactjs where I had passed link which makes my card reusable

I have a cardComponent as

const Card = (props) => {
  const {
    image,
    title,
    children,
    location,
    alt,
    displayButton,
    displayFooter,
    rating,
    item,
    website,
    number,
    websiteLink,
    link,
  } = props;

  const startDate = new Date()
  let endDate = new Date(startDate);
  endDate.setDate(startDate.getDate() + 3);
  endDate.toLocaleDateString();

  return (
      <Link to={`/search/property/listing?search=${location}&startDate=${startDate}&endDate=${endDate}&adult=${1}&child=${0}`}>
    <div className="card">
      {/* <Link to={`/${link}/${item?.id}`}> */}
        <div className="card-img">
          <img src={image} alt={alt ? alt : "image"} />
        </div>
        <div className="card-body px-4">
          <div className="card-title mt-3">
            <div className="d-flex justify-content-between align-items-center">
              <h5 className="mb-0 text-capitalize">{title?.substring(0, 15)}</h5>
              {rating &&
                <Rating star={item?.average_rating} />
              }
            </div>
            <div className="d-flex justify-content-between align-items-center mb-2">
              <div className="text-muted font-weight-light"> <BiMap /> {location}</div>
              <div className="text-muted font-weight-light">({item?.reviews_count} Reviews)</div>
            </div>
          </div>
        </div>
    </div>
      </Link>
  );
};

export default Card;

I want to reuse this card in other compoents and i want link and pass different search params but I am unable to do it like I have a component named as Blogs I want to use same card and what about the path of link I cannot use same link path for two different components

In blog component i want to use

const Card = (props) => {
  const {
    image,
    title,
    children,
    location,
    alt,
    displayButton,
    displayFooter,
    rating,
    item,
    website,
    number,
    websiteLink,
    link,
  } = props;

  const startDate = new Date()
  let endDate = new Date(startDate);
  endDate.setDate(startDate.getDate() + 3);
  endDate.toLocaleDateString();

  return (
      <Link to={`/blog/listing?blog="blog"&blog1="blog"`}>
    <div className="card">
      {/* <Link to={`/${link}/${item?.id}`}> */}
        <div className="card-img">
          <img src={image} alt={alt ? alt : "image"} />
        </div>
        <div className="card-body px-4">
          <div className="card-title mt-3">
            <div className="d-flex justify-content-between align-items-center">
              <h5 className="mb-0 text-capitalize">{title?.substring(0, 15)}</h5>
              {rating &&
                <Rating star={item?.average_rating} />
              }
            </div>
            <div className="d-flex justify-content-between align-items-center mb-2">
              <div className="text-muted font-weight-light"> <BiMap /> {location}</div>
              <div className="text-muted font-weight-light">({item?.reviews_count} Reviews)</div>
            </div>
          </div>
        </div>
    </div>
      </Link>
  );
};

export default Card;

Solution 1:^[1]

Pass the whole link in props and give it in to attribute.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Shikhar Awasthi

'Reuse Card in reactjs where I had passed link which makes my card reusable

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]