React using URL with Switch Case

Question

I'm trying to make page that will render differently depending on which card a user selects however I'm unexperienced with what I'm trying to achieve.

My codes are the following:

export default function CourseCard(props) {
    let navigate = useNavigate()
    let reroute

    const routeChange = () => {
        let path = `/course-kits#${props.course}`
        navigate(path)
    }

    reroute = () => {
        routeChange()
    }

    return (
        <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"
            onClick={reroute}
        >
            <div>
                <img
                    src={props.img}
                    alt={props.course + ' Course Hero'}
                    className="w-full h-44 object-cover"
                />
            </div>
            <p
                style={{
                    textOverflow: 'ellipsis',
                    whiteSpace: 'nowrap',
                    overflow: 'hidden',
                }}
                className="px-10 py-2 mb-3 mt-3 text-gray-500"
            >
                {props.course}
            </p>
        </div>
    )
}

This is my main Component which I create and use in my Kits:

export default function Kits() {
    const CourseData = [
        {
            id: 1,
            name: 'SeniorDevelopmentProjectII',
            img: SeniorImage,
        },
        {
            id: 2,
            name: 'DesigningTheUserExperience',
            img: UXImage,
        },
        {
            id: 3,
            name: 'NMDDigitalSurveyI',
            img: SurveyImage,
        },
    ]
    return (
        <ContentWrapper>
            <div className="bg-gray-200 m-5">
                <div className="inline-block">
                    <SearchField
                        placeholder="Search"
                        classNames="searchContainer mx-12 my-2"
                    />
                </div>
                {CourseData.map((course) => (
                    <CourseCard
                        course={course.name}
                        img={course.img}
                        key={course.id}
                    />
                ))}
            </div>
        </ContentWrapper>
    )
}

Kits is a page which uses CourseCards that are created though the use of const CourseData. This currently renders 3 cards. My goal is to make a site which will take some of the values from CourseData depending on which card the user selects such as the name: for the title of the page.

I'm trying to do this in the following class:

export default function CourseKits() {
    new URLSearchParams(this.props.location.search).get("#")
    let renderSwitch;

    renderSwitch = () => {
        switch (URLSearchParams) {
            case 'SeniorDevelopmentProjectII':
                return Object.keys(CourseData.name)[0]
            case 'DesigningTheUserExperience':
                return Object.keys(CourseData.name)[1]
            case 'NMDDigitalSurveyI':
                return Object.keys(CourseData.name)[2]
            default:
                return 'rip in peace'
        }
    }

    return (
        <ContentWrapper>
            <div className="bg-gray-200 m-5">
                <div className="inline-block">
                    <SearchField
                        placeholder="Search"
                        classNames="searchContainer mx-12 my-2"
                    />
                </div>
                <p>{CourseData.name}</p>
                <CourseCard renderSwitch />
            </div>
        </ContentWrapper>
    )
}

I'm currently trying to use URLSearchParams as I don't know what would be the best approach in getting the data that I want to show. What would be the best approach in doing this? Any suggestions or documentation to check would be appreciated!

Answer 1

CourseKits is a function component, so this.props is simply undefined. CourseKits also hasn't any defined props variable, so props is undeclared.

Use the useSearchParams hook to access the queryString parameters.

Example:

import { useSearchParams } from 'react-router-dom';

export default function CourseKits() {
  const [searchParams] = useSearchParams();

  const renderSwitch = () => {
    const course = searchParams.get("course");

    switch (course) {
      case 'SeniorDevelopmentProjectII':
        return Object.keys(CourseData.name)[0];

      case 'DesigningTheUserExperience':
        return Object.keys(CourseData.name)[1];

      case 'NMDDigitalSurveyI':
        return Object.keys(CourseData.name)[2];

      default:
        return 'rip in peace';
    }
  };

  return (
    <ContentWrapper>
      <div className="bg-gray-200 m-5">
        <div className="inline-block">
          <SearchField
            placeholder="Search"
            classNames="searchContainer mx-12 my-2"
          />
        </div>
        <p>{CourseData.name}</p>
        <CourseCard renderSwitch />
      </div>
    </ContentWrapper>
  );
}

Send the course name on a "course" queryString parameter.

const routeChange = () => {
  const path = `/course-kits#course=${props.course}`;
  navigate(path);
};