I have made a card and I want to loop the whole card component

I have made 1 card component. Here I want to loop through it, So that I can Use it again and again.

/* CardUI.jsx*/

import React from "react";
import img1 from "../assets/raj.jpg";
import "./Cards.css";
import { FaTshirt, FaLocationArrow } from "react-icons/fa";
import { BsGeoAlt } from "react-icons/bs";
import { GiTakeMyMoney } from "react-icons/gi";
import { MdEventAvailable } from "react-icons/md";
import { IoLogoDesignernews } from "react-icons/io5";

let skills=["Python","mongos","Java"]

/Here I want to loop through Card, so that I can make several card. How Can I achieve that. I Want to achieve loop, so that I do not have to re render card again and again. Here card is the functional component./

const Card= (props) => {
  return (
    <div className="card container">
      <div className="card-body row">
        <img src={img1} style={{marginRight:"10px",paddingRight:"10px"}} className="image col-sm-2" alt="raj" />
        <div className="col-md-6" style={{textAlign:"left",marginLeft:"-5px",marginRight:"10px",paddingRight:"80px",paddingLeft:"0px"}}>
          <h5 style={{ font: "1px",marginBottom:"0px"}}>{props.name}</h5>
          <p style={{ font: "0px",marginTop:"0px"}}><MdEventAvailable/> {props.current_availability}</p>
        </div>
        <h5 className="Rating col-sm-2">9.5</h5>
      </div>
      <div id="box" className="row box-aligner" style={{marginTop:"-20px"}}>
        <div>
          <div className="row" style={{marginLeft:"100px"}}>
            
                {
                    skills.map((skill)=>( 
                      <div className="col-sm-2" style={{ marginRight:"15px",marginLeft:"0px"}}>
                         <p className="language row-aligner">{skill}</p>
                       </div>
                    ))
                }

            
          </div>
        </div>
        <div style={{marginRight:"5px",fontSize:"15px", paddingRight:"30px"}}>
         < BsGeoAlt/> New Delhi - 9.6km
        </div>
        
      </div>
      <div id="designation" className="row" style={{marginTop:"-10px"}}>
        <div className="col-md-6">
          <h1 className="row-aligner" style={{marginRight:"20px",paddingLeft:"25px",marginLeft:"51px"}}>
            <FaTshirt/> 4years,2months
          </h1>
        </div>
        <div className="col-sm-6">
          <h2 className="city" style={{paddingLeft:"65px", paddingRight:"20px", fontWeight:"normal",marginLeft:"15px"}}><IoLogoDesignernews/>      {' '} Interaction Designer</h2>
        </div>
      </div>
      <div id="salary" className="row" style={{marginTop:"-4px"}}>
        <div className="col-md-6" >
          <h1   className="row-aligner" style={{marginRight:"-4px", paddingLeft:"25px", marginLeft:"10px"}}><GiTakeMyMoney/> $10k-25k/ mo</h1>
        </div>
        <div className="col-md-6">
          <a href="#" class="btn btn-primary">
            Hire Now
          </a>
        </div>
      </div>

    </div>
  );
};
export default Card;

/Card.jsx/

/*Here is the Parent file. Class component has been used here.*/
import React,{Component} from 'react'
import Card from './CardUI'
class Cards extends Component{
    
    render(){
        return(
            <div className="container-fluid d-flex justify-content-center" style={{marginTop:"100px"}}>
                <div className="row">
                    <div className="col-md-12">
                        <Card name={"Sara"}
                          current_availability={"Available"}
                          workExperience={"4"}
                          Location={"delhi"}
                          distance={"9.6 km"}
                          JobTitle={"Designer"}
                        
                        />
                    </div>
                </div>
            </div>
        )
    }
}
export default Cards;