Typescript encountered an error indicating that the property "x" is nonexistent on the specified type of 'Readonly<Props> & Readonly<{ children?: ReactNode; }>'

Question

Typescript encountered an error indicating that the property "x" is nonexistent on the specified type of 'Readonly<Props> & Readonly<{ children?: ReactNode; }>'

I recently started using Typescript with Nextjs and encountered an error while trying to typecheck a basic component. How can I resolve the error and typecheck my array of objects?

ERROR in C:/Users/Matt/sites/shell/pages/index.tsx(22,4):
22:4 Property 'swc' does not exist on type 'Readonly<Props> & Readonly<{ children?: ReactNode; }>'.
    20 |        render() {
    21 |                const {
    22 |                        swc: { results }
       |                        ^
    23 |                } = this.props;

type Props = {
    results: Array<any>;
};

Component:

interface Props {
    swc: Object;
    results: Array<any>;
}
class swc extends React.Component<Props, {}> {
    static async getInitialProps() {
        const res = await fetch("https://swapi.co/api/people/");
        const swc = await res.json();

        return {
            swc
        };
    }

    render() {
        const {
            swc: { results }
        } = this.props;

        return results.map(swc => (
            <Layout>
    ...
            </Layout>
        ));
    }
}

export default swc;

this.props:

 { swc:
   { count: 87,
     next: 'https://swapi.co/api/people/?page=2',
     previous: null,
     results:
      [ [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object] ] },
  url:
   { query: [Getter],
     pathname: [Getter],
     asPath: [Getter],
     back: [Function: back],
     push: [Function: push],
     pushTo: [Function: pushTo],
     replace: [Function: replace],
     replaceTo: [Function: replaceTo] } }

javascript typescript

Answer 1

Answer №1

Inside the swc class, you have already defined the props object, so there is no need to destructure the class itself.

You are attempting to access swc.props.swc.results when you should actually be accessing swc.props.results instead.

Overall, it appears that there may be an incorrect component setup, especially with the definition of your props. It seems that you are passing the results prop and then the swc component itself within the props.

Without further details, it is difficult to provide a precise answer. However, it is recommended to structure it as follows:

import React, { Component } from 'react'
import fetch from 'isomorphic-unfetch'

type Props = {
   results: any[], // < always try to be more specific than any[]
}

// Components in React should start with an uppercase letter based on convention
class Swc extends Component<Props, {}> {
  static async getInitialProps(ctx) {
     const res = await fetch("https://swapi.co/api/people/")
     const json = await res.json()
     return { json.swc.results }
  }

  render() {
     const { results } = this.props
     // React components should always return a singular tag 
     // (eg. div, React.Fragment, but not an array of <Layout>
     const renderResults = results && results.map(result => (
         <Layout>
            {result}
         </Layout>
     ))

      return (
        <>
          {renderResults}
        </>
      )

  }
}

export default Swc

Answer 2

Inside the swc class, you have already defined the props object, so there is no need to destructure the class itself.

You are attempting to access swc.props.swc.results when you should actually be accessing swc.props.results instead.

Overall, it appears that there may be an incorrect component setup, especially with the definition of your props. It seems that you are passing the results prop and then the swc component itself within the props.

Without further details, it is difficult to provide a precise answer. However, it is recommended to structure it as follows:

import React, { Component } from 'react'
import fetch from 'isomorphic-unfetch'

type Props = {
   results: any[], // < always try to be more specific than any[]
}

// Components in React should start with an uppercase letter based on convention
class Swc extends Component<Props, {}> {
  static async getInitialProps(ctx) {
     const res = await fetch("https://swapi.co/api/people/")
     const json = await res.json()
     return { json.swc.results }
  }

  render() {
     const { results } = this.props
     // React components should always return a singular tag 
     // (eg. div, React.Fragment, but not an array of <Layout>
     const renderResults = results && results.map(result => (
         <Layout>
            {result}
         </Layout>
     ))

      return (
        <>
          {renderResults}
        </>
      )

  }
}

export default Swc

Typescript encountered an error indicating that the property "x" is nonexistent on the specified type of 'Readonly<Props> & Readonly<{ children?: ReactNode; }>'

Answer №1

Similar questions

The column must have a defined value and cannot be left empty

There was a DOMException in Angular because the transaction is not active when trying to execute 'getAll' on 'IDBObjectStore'

Using PHP to display a message box and redirecting to a different webpage

Updating a single .jshintrc option for a folder

What is the process of specifying that an Angular directive must act as a child directive within a particular directive in Angular?

JSON Novice - persistently storing data in JSON during browser refreshes

Getting Anchor Javascript to Submit in Internet Explorer. Functioning in Firefox, Chrome, and Safari

AngularJS and Handlebars (npm)

How do I verify response values in Postman tests when the input parameter may be empty and can have multiple possible values?

How to efficiently remove duplicate items from multiple select dropdowns in Angular using ng-repeat?

Sharing data with external domains and retrieving HTML output using JavaScript

The lack of invocation of Angular 4's ngOnInit function following a call to router

Creating an easy-to-update catalog utilizing an external file: A step-by-step guide

Encountering the error message ERR_CONNECTION_TIMED_OUT while using Vue CLI

Troubleshooting app.use in Next.js and express.js: Understanding the issue

What is the best way to clear an array?

Make sure to query MySQL database to see if the data already exists, and if not, go ahead and insert it using PHP

Enhancing Javascript functionality with additional on.change customization opportunities

Difficulty with conflicting styles when dynamically loading components in Nuxt3

Issue with jQuery fadeIn() and fadeOut() functions on IE versions 7 and 8