am new to TypeScript, trying to pass item through props in the ExerciseTypes component but am getting this error Type '{ key: number; item: string; }' is not assignable to type 'IntrinsicAttributes'. please what am I doing wrong?

Here’s my code

import axios from "axios";
import { Box } from "@mui/system";
import useSWR from "swr";
import ExerciseTypes from "./ExerciseTypes";

const SearchExercise: React.FC = () => {
  const options = {
    method: "GET",
    url: "https://exercisedb.p.rapidapi.com/exercises/bodyPartList",
    headers: {
      "X-RapidAPI-Key": process.env.NEXT_PUBLIC_RAPID_API_KEY,
      "X-RapidAPI-Host": "exercisedb.p.rapidapi.com",
    },
  };

  const fetcher = (options: any) =>
    axios.request(options).then((res) => res.data);

  const { data, error } = useSWR<string[] | undefined>(options, fetcher);

  return (
    <section className="md:mt-10">
      <div className=" px-6 mt-10 border-4 hide space-x-4 w-inherit">
        {data &&
          data.map((item, index) => <ExerciseTypes key={index} item={item} />)}
      </div>
    </section>
  );
};

export default SearchExercise;

const ExerciseTypes:React.FC = () => {
  return (
    <section>
       Exercise type
    </section>
  )
}

export default ExerciseTypes

CodePudding user response：

so what the error is basically saying is that you're trying to pass item as a prop to the ExerciseTypes component, but it does not have item as a prop. so to fix this issue, you just need to tell the type-system this component has a prop.

const ExerciseTypes: React.FC<{ item: string }> = (props) => {
  return (
    <section>
       Exercise type
    </section>
  )
}

This is basically saying

• this component has an input.
• the input is named item that is of type string

Another option is to remove the item prop since the component is not using it. So update

<ExerciseTypes key={index} item={item} />

to

<ExerciseTypes key={index} />