React - Property 'data' does not exist on type 'IntrinsicAttributes & InfoGridProps'

Question

I have a demo here

I'm just trying to create a simple app where I pass data to a component and then display that data

So I have the data which is an array of objects I'm passing into the component DisplayData

import * as React from 'react';
import DisplayData from './DisplayData';
import './style.css';

export interface InfoGridProps {
  title: string;
  text: string;
}

const InfoGrid: InfoGridProps[] = [
  {
    title: 'Title 1',
    text: 'Type 1 Type 1 Type 1 Type 1 Type 1',
  },
  {
    title: 'Title 2',
    text: 'Type 2 Type 2 Type 2 Type 2 Type 2 Type 2 Type 2 Type 2 ',
  },
  {
    title: 'Title 3',
    text: 'Type 3 Type 3 Type 3 Type 3 ',
  },
];

export const App = () => {
  return (
    <div>
      <DisplayData data={InfoGrid} />
    </div>
  );
};

export default App;

And then in the component I want to just loop through that data and displat it

import * as React from 'react';
import { FC } from 'react';
import './style.css';

export interface InfoGridProps {
  title: string;
  text: string;
}

export const DisplayData: FC<InfoGridProps[]> = (data) => {
  return (
    <div>
      {data.map((item) => (
        <div>
          <h1>{item.title}</h1>
          <p>{item.text}</p>
        </div>
      ))}
    </div>
  );
};

export default DisplayData;

but here <DisplayData data={InfoGrid} /> it says

Property 'data' does not exist on type 'IntrinsicAttributes & InfoGridProps'.   

How can I get this simple app to work and display the data passed in

Answer 1

The error is correct, in that you don't have data on your InfoGridProps type, which is what you've declared your DisplayData component to be.

I believe the correct way to type this is in DisplayData is to declare a type, and reference your data property as an array of that type:

import * as React from 'react'
import { FC } from 'react'
import './style.css'

export interface InfoGridProps {
    data: InfoGridType[]
}

export type InfoGridType = {
    title: string
    text: string
}

export const DisplayData: FC<InfoGridProps[]> = (data) => {
    return (
        <div>
            {data.map((item) => (
                <div>
                    <h1>{item.title}</h1>
                    <p>{item.text}</p>
                </div>
            ))}
        </div>
    )
}

export default DisplayData