TypeScript: Property 'data' does not exist on type '{ children?: ReactNode; }'. ts(2339)

Question

Question

I'm working on a small project with BlitzJS. I'm fetching some data but I keep getting this Typescript issue:

Property 'data' does not exist on type '{ children?: ReactNode; }'.ts(2339)

import { BlitzPage } from "blitz"
import Layout from "app/core/layouts/Layout"

export async function getServerSideProps() {
  const response = await fetch(
    "https://api.coingecko.com/api/v3/coins/markets?vs_currency=eur&order=market_cap_desc&per_page=10&page=1&sparkline=false"
  )
  const data = await response.json()

  return {
    props: {
      data,
    },
  }
}

const MarketPage: BlitzPage = ({ data }) => { /////////// ERROR IS ON THIS LINE
  console.log(data)

  return (
    <div>
      <h1>This is Market Page</h1>

      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Current Price</th>
          </tr>
        </thead>
        <tbody>
          {data.map((coin) => (
            <tr key={coin.id}>
              <td>
                <p>{coin.name}</p>
              </td>
              <td>
                <p>{coin.current_price}</p>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}

MarketPage.suppressFirstRenderFlicker = true
MarketPage.getLayout = (page) => <Layout>{page}</Layout>

export default MarketPage

I guess it's something with Typescript types but I don't work with Typescript so much. I'm having hard time finding solution.

Please can you help me with some guidance here.

Thanks!

Solution

Thanks to Ajay, I resolved the issue!

Here's working example:

import { BlitzPage } from "blitz"
import Layout from "app/core/layouts/Layout"
import { Table, Th, Td } from "app/core/components/Table"

interface CoinType {
  id: string
  name: string
  current_price: string
}

interface PropType {
  data: CoinType[]
}

export async function getServerSideProps() {
  const response = await fetch(
    "https://api.coingecko.com/api/v3/coins/markets?vs_currency=eur&order=market_cap_desc&per_page=10&page=1&sparkline=false"
  )
  const data = await response.json()

  return {
    props: {
      data,
    },
  }
}

const MarketPage: BlitzPage<PropType> = ({ data }) => {
  return (
    <div>
      <h1>This is Market Page</h1>

      <Table>
        <thead>
          <tr>
            <Th>Name</Th>
            <Th hasNumber>Current Price</Th>
          </tr>
        </thead>
        <tbody>
          {data.map((coin) => (
            <tr key={coin.id}>
              <Td>
                <p>{coin.name}</p>
              </Td>
              <Td hasNumber>
                <p>{coin.current_price}</p>
              </Td>
            </tr>
          ))}
        </tbody>
      </Table>
    </div>
  )
}

MarketPage.suppressFirstRenderFlicker = true
MarketPage.getLayout = (page) => <Layout>{page}</Layout>

export default MarketPage

Answer 1

Typescript is showing errors because, You had not explain any type. You can create your type with

interface CoinType {
  id: string;
  name: string;
  current_price: string;
} 

interface PropType { 
  data: CoinType[];
}

Once You have created Types, then

const MarketPage: BlitzPage = ({ data }:PropType) => {
  console.log(data)

  return (
    <div>
      <h1>This is Market Page</h1>

      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Current Price</th>
          </tr>
        </thead>
        <tbody>
          {data.map((coin) => (
            <tr key={coin.id}>
              <td>
                <p>{coin.name}</p>
              </td>
              <td>
                <p>{coin.current_price}</p>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}

I hope It would work correctly :-)