How to fix Property 'items' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes>' error?

Question

typescript

Hello!
Here is the code
// file parent.tsx

import * as React from 'react';
import Child from './child';

class Parent extends React.Component<{}, {}> {
   constructor(props){
      super(props);
   }


    state = {
        items: [
            {
                id: 1,
                title: 'Test-1'
            },
            {
                id: 2,
                title: 'Test-3'
            }
        ]
    }

    render() {
        return (
            <div>
                <Child items={this.state.items}/>
            </div>
        );
    }
}

child.tsx file

interface Props {
    items: any;
}

class Child extends React.Component<Props, {}> {
    constructor(props){
        super(props);
    }

    render() {
        const items = this.props.items;
        return (
            <div>
            </div>
        );
    }
}

in Parent.tsx file shows error
Property 'items' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes>?

Answer 1

You have indicated that your element's state type is empty, and you are trying to fill it with something.
Just specify the type of data you are going to use as the state:

interface ParentStateItem {
    id: number;
    title: text;
}
interface ParentState {
    items: ParentStateItem[];
}

class Parent extends React.Component<{}, ParentState> {
}