Props aren't rendering on the page or in React Dev tools-CodePudding

I have a hard time understanding react props and mapping data from an array and can't get the props to render on my Card component, nor can I get them to display in the react dev tools. It's unclear to me where I'm going wrong. Please help if you can spot where I'm going wrong. I also get an error 'createCard' is defined but never used ? Though I actually pass that function into map function in App.jsx .... Also in the browser I get an error that reads "Warning: Each child in a list should have a unique "key" prop ", isn't the keys assigned to array all unique?

Card.jsx file:

    import React from "react";
    
    



function Card (props) {
  return (
     <div>
        <div className="link-container">
         
            <div className="row">
                <div className="card">
                <hr className="divide"></hr>
                <img className="img" src={props.img} alt="social-icon" />
                <h4 className="name">{props.name}</h4>
                </div>
            </div>
            
            </div>
                     
     </div>

  )

}

    export default Card;

app.jsx file:

    import Header from "./Header";
    import Card from  "./Card";
    import links from "../links";

    function createCard (socialLinks) {
  return <Card

  key = {socialLinks.id}
  img = {socialLinks.img}
  name = {socialLinks.name}
  href = {socialLinks.href}
  
/>
}

    function App() {
  return (
    <div>
      <Header />
      {
        links.map((createCard) => (
          <Card />
        ))
      }
     
      
      
       
   
    </div>
   
  );
}

export default App;

links.js file:

 const links = [
    {
        id: 1,
        name: "Youtube",
        img:"./img/youtube1.svg",
        href: "https://www.youtube.com/c/SubwaySounds"

    },
    {
        id: 2,
        name: "Spotify",
        img:"./img/spotify.svg",
        href: "https://artists.spotify.com/c/artist/3DM32kjsG7Pp5EM7o3Uv7t/profile/overview"

    },
    {
        id: 3,
        name: "Tiktok",
        img:"./img/tiktok.svg",
        href: "https://www.tiktok.com/@nysubwaysounds"

    },
    {
        id: 4,
        name: "Instagram",
        img:"./img/Instagram1.svg",
        href: "https://www.instagram.com/nycsubwaysounds/?hl=en"

    },

    {
        id: 5,
        name: "Shop",
        img:"./img/shop.svg",
        href: "https://my-store-11524143.creator-spring.com/"

    }
    

]

export default links;

CodePudding user response：

You are not using the function correctly in App.jsx. createCards in the map is simply the name of the argument of the function, but you can just use the function directly inside the map:

function createCard (socialLink) {
  return <Card
    key = {socialLink.id}
    img = {socialLink.img}
    name = {socialLink.name}
    href = {socialLink.href}
  />
}

function App() {
  return (
    <div>
      <Header />
      {
        links.map(createCard)
      }
    </div>
  );
}

Also remember inside of a map function you'll be getting each element from the array individually, so I changed the name of the argument in the function from socialLinks to socialLink so it's easier to understand.

CodePudding user response：

The Card component and link file looks fine, some changes to be made to the App.jsx

import Header from "./Header";
    import Card from  "./Card";
    import links from "../links";

    function CreateCard (socialLinks) {
  return <Card

  key = {socialLinks.id}
  img = {socialLinks.img}
  name = {socialLinks.name}
  href = {socialLinks.href}
  
/>
}

    function App() {
  return (
    <div>
      <Header />
      {
        links.map((link) => (
         <CreateCard 
           key={link.id} 
           img={link.img}
           name={link.name}
           href={link.href}
          />
        ))
      }
    </div>
   
  );
}

export default App;

So mapping each link and passing the attributes would solve the keys issue and the unused CreateCard