I'm trying to make a reusable card in react. I want to add tags to the bottom of the card that I can customize for each card.

import React from 'react'
import { projects } from "../constants";
import { star } from "../assets";

const Feat = ({feature}) => 
    // console.log(feature)
(
    <div>
    <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#{feature}</span>
    </div>
)

const Project = ({links}) => 
    
    // console.log(links[0])
    (
    <div className="rounded overflow-hidden shadow-lg">
        <img className="w-.1" src={star} alt="Mountain"/>
        <div className="px-6 py-4">
        <div className="font-bold text-xl mb-2">Mountain</div>
        <p className="text-gray-700 text-base">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, Nonea! Maiores et perferendis eaque, exercitationem praesentium nihil.
        </p>
        </div>
        <div className="px-6 pt-4 pb-2">
            {links.map((feature, index) => 
            // console.log(feature.link)
            (
            <Feat key={feature.name} {...feature} index={index} />
            ))}
            {/* <feat key="He" {...links} /> */}
        </div>
    </div>
)

const Projects = () => (
<div className="p-10 grid grid-cols-1 sm:grid-cols-1 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 gap-5">
    {projects.map((feature, index) =>
    // console.log(feature)
     (
        <Project key={feature.id} {...feature} index={index} />
      ))}
</div>
)

export default Projects

I'm importing the values i want from a js file

export const projects = [
  {
    id: "Community",
    links: [
      {
        name: "Help Center",
        link: "https://www.exa.com/help-center/",
      },
      {
        name: "Partners",
        link: "https://www.example.com/partners/",
      },
      {
        name: "Suggestions",
        link: "https://www.example.com/suggestions/",
      },
      {
        name: "Blog",
        link: "https://www.example.com/blog/",
      },
      {
        name: "Newsletters",
        link: "https://www.example.com/newsletters/",
      },
    ],
  },

If I change the name of the parameter 'Project' takes from 'links' to anything else i i get an error, so there is probably something wrong here as well.

When I try to spread the remaining values into 'Feat', I get an error. I'm stuck and don't know where to go from here. Help would be greatly appreciated.

I've made a git repo with all the code if that would be of help

git clone https://github.com/CatInAHatIsBack/react-testing.git

CodePudding user response：

When you destructure an object into a component's props, it passes each key / value pair as a prop.

For example, your feature objects have a name and link property so using this

<Feat {...feature} />

is the same as

<Feat name={feature.name} link={feature.link} />

The problem there is that your component doesn't expect either of those prop names. It's only looking for a prop named feature

const Feat = ({ feature }) => {
  // ...
};

This is the same as...

const Feat = (props) => {
  const feature = props.feature;
  // ...
};

Consuming this component should then look like this

<Feat key={feature.name} feature={feature.name} />

You can pass any value you want for the feature prop but keep in mind that you're attempting to render it directly so it must be something render-able like a string, number or JSX element.