What would be the correct type to use in this case?

I'm trying to create Header component and when I add prop "testId", I get following type. message -->

Type '{ children: ReactNode; testId: string | undefined; }' is not assignable to type 'IntrinsicAttributes & ClassAttributes & HTMLAttributes'. Property 'testId' does not exist on type 'IntrinsicAttributes & ClassAttributes & HTMLAttributes'

But when I use "id" instead of "testId", I don't get type error, which is weird. I would like to use "testId" for Heading prop and not sure what type I need to assign. What am I missing? https://codesandbox.io/s/flamboyant-leftpad-l3bhj?file=/src/App.tsx

import "./styles.css";
import * as React from "react";

interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
  headingLevel: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p";
  children?: React.ReactNode;
  testId?: string;
}

const Heading: React.FunctionComponent<HeadingProps> = ({
  headingLevel: HeadingLevel = "h1",
  children,
  testId
}: HeadingProps) => {
  return <HeadingLevel testId={testId}>{children}</HeadingLevel>;
};

const App: React.FC<{ headingText: string; description: string }> = () => (
  <div>
    <Heading headingLevel="h2" testId="test-heading">
      Hello World!
    </Heading>
  </div>
);
export default App;

Solution 1:

The problem is in the following line:

return <HeadingLevel testId={testId}>{children}</HeadingLevel>;

testId is not a valid HTML attribute. You shoud use testId as the Heading prop and use a JSON for custom attributes in the HeadingLevel component.

import "./styles.css";
import * as React from "react";

interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
  headingLevel: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p";
  children?: React.ReactNode;
  testId?: string;
}

const Heading: React.FunctionComponent<HeadingProps> = ({
  headingLevel: HeadingLevel = "h1",
  children,
  testId
}: HeadingProps) => {
  const attrs = {"testId": testId}
  return <HeadingLevel {...attrs}>{children}</HeadingLevel>;
};

const App: React.FC<{ headingText: string; description: string }> = () => (
  <div>
    <Heading headingLevel="h2" testId="test-heading">
      Hello World!
    </Heading>
  </div>
);
export default App;