React Typescript - Argument of type 'string' is not assignable to parameter of type within useState

Question

I have a React web app I want to pull in two URLs containing API data and displaying said data. One URL is English and one is French.

To pull in the French API data, I need to append "?accept-language=fr-ca" to the end of the original English URL:

let param = "?";
let french = param + "accept-language=fr-ca";

And then when using setData:

setData(response.data + french);

When appending french to setData above, I receive the following TypeScript error:

Argument of type 'string' is not assignable to parameter of type 'SetStateAction<InspectionReportData[] | null | undefined>'.

How can I fix this TypeScript error?

Full code below:

interface Props_PIReport {
  lang: string;
  jsonDataProduct: Type_jsonModelDetails | undefined;
}

const PeriodicAnnualInspectionReport = ({
  lang,
  jsonDataProduct,
}: Props_PIReport) => {
  // Make a call to fetch the inspection report data within the original API
  const [data, setData] = useState<InspectionReportData[] | null>();

  useEffect(() => {
    let param = "?";
    let french = param + "accept-language=fr-ca";
    if (lang === "fr") {
      if (jsonDataProduct) {
        axios.get(jsonDataProduct["inspection-link"]).then((response) => {
          setData(response.data + french);
        });
      }
    } else {
      ...
    }
  }, []);

return (
    ...
  );
};

mikeb · Accepted Answer · 2022-08-04 16:09:42Z

2

You're not calling setData with the right type of argument.

useState<InspectionReportData[] | null>()

This line means you'll call setState with one of two types: null or an array of InspectionReportData.

You are actually calling it with a string type: setData(response.data + french);

You need to either make it accept a string or change the way you're calling it.

This is exactly what the error message means.

answered Aug 4, 2022 at 16:09

mikeb

11.5k9 gold badges73 silver badges135 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jrad09 Over a year ago

Okay great. Is there a way I can make it accept both an Array, null and a string? Appreciate your hep.

mikeb Over a year ago

useState<InspectionReportData[] | null | string>() will do that. I suggest you read up on typescript a little bit...

Collectives™ on Stack Overflow

React Typescript - Argument of type 'string' is not assignable to parameter of type within useState

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related