I am receiving a massive error when mapping through an array like:
// Home.tsx
render() {
const { inputs, outputs, expectedOutputs } = this.state;
return (
<ContentContainer>
{inputs.map((input, i) => {
return (
<TestRow
key={i}
rowNumber={i}
xml={inputs[i].xml}
desc={inputs[i].desc}
output={outputs[i]}
expectedOutput={expectedOutputs[i]}
handleTextAreaUpdate={this.handleTextAreaUpdate}
/>
);
})}
</ContentContainer>
);
// TestRow.tsx
interface TestRowProps {
xml: string;
desc: string;
output: string;
expectedOutput: string;
rowNumber: number;
}
class TestRow extends Component<TestRowProps, {}> {
textArea: any;
the error is:
No overload matches this call. Overload 1 of 2, '(props: Readonly): TestRow', gave the following error.
Type '{ key: number; rowNumber: number; xml: string; desc: string; output: never; expectedOutput: string; handleTextAreaUpdate: (e: { target: { value: string; }; }, column: number, rowNumber: number) => void; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<TestRow> & Readonly<TestRowProps> & Readonly<{ children?: ReactNode; }>'.
Property 'handleTextAreaUpdate' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<TestRow> & Readonly<TestRowProps> & Readonly<{ children?: ReactNode; }>'.
Overload 2 of 2, '(props: TestRowProps, context?: any): TestRow', gave the following error.
Type '{ key: number; rowNumber: number; xml: string; desc: string; output: never; expectedOutput: string; handleTextAreaUpdate: (e: { target: { value: string; }; }, column: number, rowNumber: number) => void; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<TestRow> & Readonly<TestRowProps> & Readonly<{ children?: ReactNode; }>'.
Property 'handleTextAreaUpdate' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<TestRow> & Readonly<DiagramProps> & Readonly<{ children?: ReactNode; }>'
. TS2769
The error "Type is not assignable to type 'never'" occurs when we declare an empty state array with the useState hook but don't type the array. To solve the error, use a generic to type the state array, e.g. const [arr, setArr] = useState<string[]>([]) . Here is an example of how the error occurs. Copied!
The React. js error "Type {children: Element} has no properties in common with type IntrinsicAttributes" occurs when we try to pass a children prop to a component that doesn't take any props. To solve the error define and type the props on the component.
in the error message, you can find the problem. Property 'handleTextAreaUpdate' does not exist on type
means that you should define a property for handleTextAreaUpdate
in the TestRowProps
interface.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With