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

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;

CodePudding user response：

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;

CodePudding user response：

There is a typo in your access. You specify testId in the interface, but in the implementation you try to access testingId which does not match your interface signature. Also, using regular id worked because that's a valid attribute for all elements. Here's the corrected code:

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 // typo was here
}: HeadingProps) => {
  return <HeadingLevel>{children}</HeadingLevel>;
};

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

export default App;

TypeScript Playground Link