Using Component Props in multiple classes

Question

I've made a react component that I'm using and setting in another class:

export default function CourseCard(props) {
    return (
        <a href='/course-kits'>
            <div
                className="bg-white border border-gray-100 rounded-lg text-center shadow-lg align-center hover:cursor-pointer
        hover:shadow-xl hover:-translate-y-2 transition m-6"
            >
                <div>
                    <img
                        src={props.img}
                        alt={props.course + ' Course Hero'}
                        className="w-full h-44 object-cover"
                    />
                </div>
                <p
                    className="px-10 py-2 mb-3 mt-3 text-gray-500"
                >
                    {props.course}
                </p>
            </div>
        </a>
    )
}

Here is the example of Kits which uses the CourseCards

export default function Kits() {
    return (
        <ContentWrapper>
            <div className="bg-gray-200 m-5">
                <div className="inline-block">
                    <SearchField
                        placeholder="Search"
                        classNames="searchContainer mx-12 my-2"
                    />
                </div>
                <CourseCard
                    course="Senior Development Project II"
                    img={SeniorImage}
                />
                <CourseCard course="Designing The User Experience" img={UXImage} />
                <CourseCard course="NMD Digital Survey I" img={SurveyImage} />
            </div>
        </ContentWrapper>
    )
}

Seeing that I'm using multiple CourseCards how do I take the props which I've set up here in another page. I want to render a page that uses details of the selected CourseCard i.e. Title of the page would match the props.course and be different depending on which CourseCard was selected (This would be done in a CourseKits).

Answer 1

You can extract out the course cards props to a central place. May be just a module which exports this data to you. Then use that to render and reuse these props where ever you need.

// course.js
export const CourseData = [
{
   id: 1,
   name: "Senior Development Project II",
   img: SeniorImage 
},
...
]

// App.js

import { CourseData } from './course.js';

...
...
return (
   ...
   {CourseData.map((course) => 
     <CourseCard
        course={course.name}
        img={course.img}
        key={course.id}
       />
   )}
   ...
)