ReactJS/Typescript Error Solved: Cannot Find Name

When we use ReactJS functional component with props, it throws following error:

Error: Cannot find name 'heading'.

Here is a code sample that generates the error.

import React, {FC} from "react";

const SectionHeader: FC<{heading: string}> = ({heading: string}) => {
    return <h2 className="text-center">{heading}</h2>;
}

This in fact is not a ReactJS error. It is a Typescript error.

By mistake I defined data type “string” for variable “heading” two times and hence it was causing an issue. Here is a revised code with no errors.

const SectionHeader: FC<{heading: string}> = ({heading}) => {
    return <h2 className="text-center">{heading}</h2>;
}