Why my props is not working properly? what is my mistake? the text and images is replicating on each other

Card.js:

import React from "react";
import "./Card.css";

function Card(props) {
  return (
    <div>
      <img />
      <span className="location-style">{props.location}</span>
      <span className="view-style">{props.view}</span>
      <h1 className="title-style">{props.title}</h1>
      <p className="decs-style">{props.description}</p>
      <span className="date-style">{props.date}</span>
    </div>
  );
}

export default Card;

MainContent.js:

import React from "react";
import "../Components/MainContent.css";
import Card from "../Components/Card.js";
import data from "./data.js";

function MainContent() {
  const content = data.map((item) => {
    return (
      <Card
        key={item.id}
        coverImg={item.coverImg}
        title={item.title}
        location={item.location}
        view={item.view}
        description={item.description}
        date={item.stats.date}
      />
    );
  });

  return (
    <>
      <header>
        <span className="header-text">my travel journal.</span>
      </header>
      <section>{content}</section>
    </>
  );
}

export default MainContent;

data.js:

export default [{
    id: 1,
    title: "Mount Fuji",
    description: "Mount Fuji is the tallest mountain in Japan, standing at 3,776 meters (12,380 feet). Mount Fuji is the single most popular tourist site in Japan, for both Japanese and foreign tourists.",
    view: 'View on Google Maps',
    coverImg: "img here",
    stats: {
      date: '12 Jan, 2021 - 24 Jan, 2021',
    },
    location: "JAPAN",
  },
  {
    id: 2,
    title: "Sydney Opera House",
    description: "The Sydney Opera House is a multi-venue performing arts centre in Sydney. Located on the banks of the Sydney Harbour, it is often regarded as one of the 20th century's most famous and distinctive buildings",
    view: 'View on Google Maps',
    coverImg: "img here",
    stats: {
      date: '12 Jan, 2021 - 24 Jan, 2021',
    },
    location: "AUSTRALIA",

  },
  {
    id: 3,
    title: "Geirangerfjord",
    description: "The Geiranger Fjord is a fjord in the Sunnmøre region of Møre og Romsdal county, Norway. It is located entirely in the Stranda Municipality.",
    view: 'View on Google Maps',
    coverImg: "https://source.unsplash.com/3PeSjpLVtLg",
    stats: {
      date: '12 Jan, 2021 - 24 Jan, 2021',
    },
    location: "NORWAY"
  }

]

Card.css:

.img-style {
  position: absolute;
  width: 125px;
  height: 168px;
  left: 40px;
  top: 100px;
  border-radius: 5px;
}

.location-style {
  position: absolute;
  width: 40px;
  height: 10px;
  left: 195px;
  top: 119px;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-size: 10.24px;
  line-height: 12px;
  letter-spacing: 0.17em;
  color: #2B283A;
}

.view-style {
  position: absolute;
  width: 106px;
  height: 13px;
  left: 247px;
  top: 119px;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-size: 10.24px;
  line-height: 12px;
  /* identical to box height */
  text-decoration-line: underline;
  color: #918E9B;
}

.title-style {
  position: absolute;
  width: 326px;
  height: 33px;
  left: 184px;
  top: 333px;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-size: 25px;
  line-height: 30px;
  color: #2B283A;
}

.decs-style {
  position: absolute;
  width: 326px;
  height: 45px;
  left: 184px;
  top: 203px;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-size: 10.24px;
  line-height: 150%;
  /* or 15px */
  color: #2B283A;
}

.date-style {
  position: absolute;
  width: 319px;
  height: 11px;
  left: 184px;
  top: 380px;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-size: 10.24px;
  line-height: 12px;
  color: #2B283A;
}

CodePudding user response：

I'm guessing your cards are placed on top of each other?

This happens because you are using position: absolute; and the wrapper element <div> doesn't have position: relative;.

But you really shouldn't use position to "position" your elements, rather you should use the normal flow to layout elements and only use absolute positioning for edge cases since it "pulls" elements out of their normal flow.

Learn about concepts like:

• flexbox
• grid
• inline
• block

For positioning/to layout elements according to the natural flow in the document.

There are many more concepts, but learning these should get you far in the game.