The data property does not exist in type 'Intrinsicattributes & Intrinsicclassattributes & Readonly & Readonly<{ Children?: Reactnode; }>'. ts(2322)

Question

Português:

The type '{ data: Undefined; }' cannot be assigned to the type 'Intrinsicattributes & Intrinsicclassattributes & Readonly & Readonly<{ Children?: Reactnode; }>'. A 'data' property does not exist on type 'Intrinsicattributes & Intrinsicclassattributes & Readonly & Readonly<{ Children?: Reactnode; }>'. ts(2322)

English:

Type '{ data: Undefined; }' is not Assignable to type 'Intrinsicattributes & Intrinsicclassattributes & Readonly & Readonly<{ Children?: Reactnode; }>'. Property 'data' does not exist on type 'Intrinsicattributes & Intrinsicclassattributes & Readonly & Readonly<{ Children?: Reactnode; }>'. TS2322

---

App.tsx:

import React, {Component} from 'react'

import Graph from './components/Graph'


interface Props{}
export default class App extends Component<Props>{
    state = {
        data: undefined
    }

    render(){return(
        <Graph data={this.state.data}/>
    )}
}

Graph.tsx:

import React, {PureComponent} from 'react'
import {LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend} from 'recharts'


interface Props{}
export default class Graph extends PureComponent<Props>{
    render(){return(
        <LineChart width={1000} height={600} data={this.props.data} margin={{top: 5, right: 30, left: 20, bottom: 5}}>
            <CartesianGrid strokeDasharray='3 3'/>
            <XAxis dataKey='timestamp'/>
            <YAxis/>
            <Tooltip/>
            <Legend/>
            <Line type='monotone' dataKey='ping' stroke='#8884d8' activeDot={{r: 8}}/>
        </LineChart>
    )}
}

I’m not getting past the state data to the Component Graph via props. Some solution?

Answer 1

The state must be initialized within the constructor of the class:

import React, {Component} from 'react';    
import Graph from './components/Graph';   

interface Props{}
export default class App extends Component<Props>{

  constructor(props) {
    super(props);
    this.state = {
        data: undefined
    };
  }

  render(){
    return(
      <Graph data={this.state.data}/>
    );
  }
}