component and passing argument as the attributes

 IN INDEX.JS

import React from "react"

import ReactDom from "react-dom"

import CARD from "./Cards"

import SDATA from "./Sdata"

ReactDom.render(

   <>

   <h1>LIST OF TOP 5 ORIGINAL NETFLIX SERIES</h1>

       <CARD

       Sname={SDATA[0].Sname}

       image={SDATA[0].image}

       title={SDATA[0].title}

       links={SDATA[0].links}   

       />

        <CARD

      Sname={SDATA[1].Sname}

      image={SDATA[1].image}

      title={SDATA[1].title}

      links={SDATA[1].links} 

       />

        <CARD

      Sname={SDATA[2].Sname}

      image={SDATA[2].image}

      title={SDATA[2].title}

      links={SDATA[2].links} 

       />

   

   </>,document.getElementById("root")

);

Sdata.jsx

import React from "react";

function CARD(props){

    return(

        <>

        <div className="card">

            <div className="image">

                <img src={props.image}/>

            </div>

            <div className="attributes">

                <div className="title">{props.title}</div>

                <div><a href={props.links} target="_black">click here</a></div>

                <div className="Sname">{props.Sname}</div>

            </div>

        </div>

      </>

    );

}

export default CARD;

Cards.jsx

const SDATA=[

    {

        Sname:"dark",

        image:"https://static.toiimg.com/thumb/msid-53363242,width-800,height-600,resizemode-75/53363242.jpg",

        title:"the original netflix series",

        links:"https://www.google.com/search?q=dark+poster&sxsrf=ALeKk035bH_4885TRhEiI98EGD2zbaRAaQ:1619780102833&tbm=isch&source=iu&ictx=1&fir=uQ3Li0uIMqEKrM%252C71694Tai9yeSOM%252C_&vet=1&usg=AI4_-kQMW3WPOne5SVp_mJVjR2vqHLVGSQ&sa=X&ved=2ahUKEwjj1JKN56XwAhVL8HMBHQI7Bu4Q9QF6BAgWEAE&biw=1366&bih=625#imgrc=FBUAlSFmRUpxrM"    

    },

    {

        Sname:"Stranger things",

        image:"https://static.toiimg.com/thumb/msid-53363242,width-800,height-600,resizemode-75/53363242.jpg",

        title:"the original netflix series",

        links:"https://www.google.com/search?q=dark+poster&sxsrf=ALeKk035bH_4885TRhEiI98EGD2zbaRAaQ:1619780102833&tbm=isch&source=iu&ictx=1&fir=uQ3Li0uIMqEKrM%252C71694Tai9yeSOM%252C_&vet=1&usg=AI4_-kQMW3WPOne5SVp_mJVjR2vqHLVGSQ&sa=X&ved=2ahUKEwjj1JKN56XwAhVL8HMBHQI7Bu4Q9QF6BAgWEAE&biw=1366&bih=625#imgrc=FBUAlSFmRUpxrM"    

    },

    {

        Sname:"The vampire Diaries",

        image:"https://static.toiimg.com/thumb/msid-53363242,width-800,height-600,resizemode-75/53363242.jpg",

        title:"the original netflix series",

        links:"https://www.google.com/search?q=dark+poster&sxsrf=ALeKk035bH_4885TRhEiI98EGD2zbaRAaQ:1619780102833&tbm=isch&source=iu&ictx=1&fir=uQ3Li0uIMqEKrM%252C71694Tai9yeSOM%252C_&vet=1&usg=AI4_-kQMW3WPOne5SVp_mJVjR2vqHLVGSQ&sa=X&ved=2ahUKEwjj1JKN56XwAhVL8HMBHQI7Bu4Q9QF6BAgWEAE&biw=1366&bih=625#imgrc=FBUAlSFmRUpxrM"    

    },

    {

        Sname:"The vampire Diaries",

        image:"https://static.toiimg.com/thumb/msid-53363242,width-800,height-600,resizemode-75/53363242.jpg",

        title:"the original netflix series",

        links:"https://www.google.com/search?q=dark+poster&sxsrf=ALeKk035bH_4885TRhEiI98EGD2zbaRAaQ:1619780102833&tbm=isch&source=iu&ictx=1&fir=uQ3Li0uIMqEKrM%252C71694Tai9yeSOM%252C_&vet=1&usg=AI4_-kQMW3WPOne5SVp_mJVjR2vqHLVGSQ&sa=X&ved=2ahUKEwjj1JKN56XwAhVL8HMBHQI7Bu4Q9QF6BAgWEAE&biw=1366&bih=625#imgrc=FBUAlSFmRUpxrM"    

    }

]

export default SDATA;   

using map:in index.js(other same)

import React from "react"

import ReactDom from "react-dom"

import CARD from "./Cards"

import SDATA from "./Sdata"

function function_call(element){

     return(

      <CARD

     Sname={element.Sname}

     image={element.image}

     title={element.title}

     links={element.links}   

     />);

}

ReactDom.render(

   <>

   <h1>LIST OF TOP 5 ORIGINAL NETFLIX SERIES</h1>

       

    {SDATA.map(function_call)};

   </>,document.getElementById("root")

);

*******************OR***********************

import React from "react"

import ReactDom from "react-dom"

import CARD from "./Cards"

import SDATA from "./Sdata"

ReactDom.render(

   <>

   <h1>LIST OF TOP 5 ORIGINAL NETFLIX SERIES</h1>

       

    {

    SDATA.map((element)=>{

                   return(

                    <CARD

                    key={element.id}  /* to assign unique id to each of the element */

                   Sname={element.Sname}

                   image={element.image}

                   title={element.title}

                   links={element.links}/>

                   )

                   })}

   </>,document.getElementById("root")

);