CODEWITHSUNDEEP
reactjstypescriptreact-tsx
SomethingsGottaGive
SomethingsGottaGive

Reputation: 1894

react typescript error 'Type '{ ... }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<...>

I am just starting out with a react typescript project and I getting this cryptic error:

Failed to compile.

/Users/simon/Code/web/react-news-col/src/MainNewsFeed.tsx
TypeScript error in /Users/simon/Code/web/react-news-col/src/MainNewsFeed.tsx(27,35):
No overload matches this call.
  Overload 1 of 2, '(props: {} | Readonly<{}>): NewsFeedItem', gave the following error.
    Type '{ index: number; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<NewsFeedItem> & Readonly<{}> & Readonly<{ children?: ReactNode; }>'.
      Property 'index' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<NewsFeedItem> & Readonly<{}> & Readonly<{ children?: ReactNode; }>'.
  Overload 2 of 2, '(props: {}, context: any): NewsFeedItem', gave the following error.
    Type '{ index: number; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<NewsFeedItem> & Readonly<{}> & Readonly<{ children?: ReactNode; }>'.
      Property 'index' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<NewsFeedItem> & Readonly<{}> & Readonly<{ children?: ReactNode; }>'.  TS2769

    25 |             newsFeedItems.push(<Row>
    26 |                 <Col sm={12} md={6} lg={4}>
  > 27 |                     <NewsFeedItem index={i}/>
       |                                   ^
    28 |                 </Col>
    29 |             </Row>)
    30 |         }
Compiling...
Files successfully emitted, waiting for typecheck results...
Failed to compile.

/Users/simon/Code/web/react-news-col/src/MainNewsFeed.tsx
TypeScript error in /Users/simon/Code/web/react-news-col/src/MainNewsFeed.tsx(27,35):
Type '{ index: number; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<NewsFeedItem> & Readonly<{}> & Readonly<{ children?: ReactNode; }>'.
  Property 'index' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<NewsFeedItem> & Readonly<{}> & Readonly<{ children?: ReactNode; }>'.  TS2322

    25 |             newsFeedItems.push(<Row>
    26 |                 <Col sm={12} md={6} lg={4}>
  > 27 |                     <NewsFeedItem index={i}/>
       |                                   ^
    28 |                 </Col>
    29 |             </Row>)
    30 |         }
Compiling...

Here's the code:

class MainNewsFeed extends React.Component {
    render() {
        return (
            <NewsFeedCol/>
        );
    }
}

class NewsFeedCol extends React.Component {
    constructor(props: any) {
        super(props);
    }
    render() {
        let newsFeedItems = [];
        let numOfNewsFeedItems = 5;
        for(let i = 0; i<numOfNewsFeedItems; i++) {
            newsFeedItems.push(
            <Row>
                <Col sm={12} md={6} lg={4}>
                    <NewsFeedItem index={i}/>
                </Col>
            </Row>)
        }

        return (
            newsFeedItems
        );
    }
}

class NewsFeedItem extends React.Component {
    constructor(props: any) {
        super(props);
    }
    render() {
        const theIndex = this.props.index
        return (
            <span className="newsFeedItem">
                test {theIndex}
            </span>
        );
    }
}

As I understand it I cannot modify prop variables but I can add them for components so I am not sure why I am getting a readonly error when I try to set props for the index here. What am I missing?

Upvotes: 1

Views: 1866

Answers (1)

Nicholas Tower
Nicholas Tower

Reputation: 84982

class NewsFeedItem extends React.Component {

React.Component is a generic, which you can use to specify what props (and/or state) the component expects. You havn't done that, so it's using the defaults, which is that it doesn't accept any props.

Here's an example with the props defined:

interface NewsFeedItemProps {
  index: number
}

class NewsFeedItem extends React.Component<NewsFeedItemProps> {

Upvotes: 2

Related Questions