React props not working for me I am designing a card

I am learning React.js these days..i was designing a card by react...you can view my code below...please explain where i am missing.... Output is not showing any image and only showing one card output not all cards.....

Card Component:

import React from 'react';
import ReactDOM from 'react-dom';

function Card(props){
    return(
        <>
    <div className="main">
        <div className="img1">
            <img src={props.imgsrc} alt="card image"/>
            <div className="title">
                <h3>{props.title}</h3>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugiat, repellat.</p>
                <button>watch now</button>
            </div>
          </div>
    </div>
    </>
    )
}

ReactDOM.render(
    <>
    <Card  imgsrc="https://source.unsplash.com/random/200x200" title="First Image"/>
    <Card imgsrc="https://source.unsplash.com/random/200x200" title="Second Image"/>
    <Card imgsrc="https://wallpapercave.com/wp/wp6672547.jpg" title="Third Image"/>
    </>,
    document.getElementById('root')
);

export default Card;

App Component:

import Card from "./Card"
// other imports

function App() {
    return (
        <>
            <Heading />
            <Imgs />
            <Tme />
            <Calc />
            <hr></hr>
            <Card />
        </>
    );
}

Solution

Your Card component actually works as a standalone react app. This is because when you run the entire script it also executes the ReactDOM.render function which renders your react element at #root and on that situation, no React Element has been rendered yet prior to calling ReactDOM.render.

function Card(props){
    return(
        <React.Fragment>
          <div className="main">
              <div className="img1">
                <img src={props.imgsrc} alt="card image"/>
                <div className="title">
                    <h3>{props.title}</h3>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugiat, repellat.</p>
                    <button>watch now</button>
                </div>
              </div>
          </div>
        </React.Fragment>
    )
}

ReactDOM.render(
    <React.Fragment>
      <Card  imgsrc="https://source.unsplash.com/random/200x200" title="First Image"/>
      <Card imgsrc="https://source.unsplash.com/random/200x200" title="Second Image"/>
      <Card imgsrc="https://wallpapercave.com/wp/wp6672547.jpg" title="Third Image"/>
    </React.Fragment>,
    document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

It does not work when you are importing Card to the App because a React Element has probably already been rendered there (e.g., the parent component App), therefore calling ReactDOM.render again on the same html element #root will cause unexpected results.

So to solve the issue with regards to only 1 card is rendering & the images are not showing, just simply copy what you've done on inside the ReactDOM.render to what the App is returning

// essential imports here

function App() {
    return (
        <>
            <Heading />
            <Imgs />
            <Tme />
            <Calc />
            <hr>
            </hr>
            <Card imgsrc="https://source.unsplash.com/random/200x200" title="First Image" />
            <Card imgsrc="https://source.unsplash.com/random/200x200" title="Second Image" />
            <Card imgsrc="https://wallpapercave.com/wp/wp6672547.jpg" title="Third Image" />
        </>
    );
}