Rick and Morty'den istek atıyorum. İstediğim gibi çekiyorum ama karakterin üstüne tıklayınca o karakterin özelliğinin çıkmasını istiyorum. Bir sayfada 20 karakterin özellikleri mevcut. 1. karaktere tıklayınca o karakterin 20 kopyası ekranda beliriyor.

    // import classNames from "classnames";
import styles from "./card.module.scss";
import { useNavigate } from "react-router-dom";
export const Card = (props: Props) => {
  const navigate = useNavigate();

  const handleClick = (id: number) => {
    navigate(`details/${id}`);
  };

  const { name, status, species, location, image, id } = props;

  return (
    <div className={styles.container} onClick={() => handleClick(id)}>
      <div className={styles.image}>
        <img src={image} alt="image" className={styles.image} />
        {/* object->image */}
      </div>
      <div className={styles.info}>
        <div className={styles.title}>
          <span className={styles.chracterName}>{name}</span>
          {/* object->name */}

          <div className={styles.status}>
            <span
              className={classNames(
                styles.dot,
                status === "Dead" && styles.redDot
              )}
            ></span>
            {status} - {species}
          </div>
          {/* object->status && species */}
        </div>

        <div className={styles.text}>
          <span>Last Known Location</span>
          {/* last know */}
          <span>{location?.name}</span>
          {/* object->location->name */}
        </div>
        <div className={styles.text}>
          <span>First Seen</span>
          {/* first seen */}
          <span>-</span>
          {/* object->episode */}
        </div>
      </div>
    </div>
  );
};

interface Props {
  name: string;
  status: string;
  species: string;
  image: string;
  location: { name: string; url: string };
  id: number;
}

Card sayfasında yönledirme yapıyorum.

    // import { Footer } from "../../footer/footer";
import { Header } from "../../header/header";
import { useAppContext } from "common/context/appContext";
import { useEffect } from "react";
import { useParams } from "react-router";
import { getCharactersDetailsFromApi } from "services/network";
// import { Card } from "common/components/card/card";
import styles from "./details.module.scss";
export const Details = () => {
  // const { name, image } = props;

  const { characterDetails, setCharacterDetails, characters } = useAppContext();
  console.log(characterDetails);
  const { id } = useParams();

  useEffect(() => {
    getCharactersDetailsFromApi(Number(id))
      .then((res) => setCharacterDetails(res))
      .catch((err) => console.warn(err));
  }, [id]);

  return (
    <div className={styles.container}>
      <Header />
      <div className={styles.content}>
        {characters?.map((index: number | string) => (
          // <Card
          //   key={index}
          //   name={character?.name}
          //   status={character?.status}
          //   location={character?.location}
          //   species={character?.species}
          //   image={character?.image}
          //   id={character?.id}
          // />
          <div className={styles.card} key={characterDetails?.index}>
            <h1 className={styles.title}> {characterDetails?.name} </h1>
            <img
              className={styles.image}
              src={characterDetails?.image}
              alt="image"
            />
          </div>
        ))}
        efewfewf
      </div>

      <Footer />
    </div>
  );
};
// interface Props {
//   name: string;
//   image: string;
// }

Details sayfasında ekrana bastırıyorum.