Setting initial state array

Question

I am trying to set initial state with games array like this:

import React from 'react'
import GameList from './GameList'

type GameType =  {
    key : number,
    team1 : string,
    team2 : string
}

interface AppState {
  games: GameType[]
}

class App extends React.Component<{}, AppState {

  constructor(props : {}) {
    super(props)
    this.state = {
      games : [{"key" : 1, "team1" : "AAA", "team2" : "BBB"},
               {"key" : 2, "team1" : "CCC", "team2" : "DDD"}]
      }
  }

  render() {
    return (
      <div className="app">
        <div className="container mt-4">
          <GameList games = {this.state.games} />
        </div>
      </div>
    )
  } 
}

export default App;

when I am sending this state to GameList component it gives me:

Type '{ games: GameType[]; }' is not assignable to type 'IntrinsicAttributes & GameType[]'. Property 'games' does not exist on type 'IntrinsicAttributes & GameType[]

What is the correct way to do this?

Nicholas Tower · Accepted Answer · 2019-09-24 19:50:35Z

1

Add an interface (or type if you prefer) describing the full app state, and use that as the second parameter to the generic.

interface AppState {
  games: GameType[]
}

class App extends React.Component<{}, AppState> {

answered Sep 24, 2019 at 19:50

Nicholas Tower

87k10 gold badges115 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Irmantas Želionis Over a year ago

Thanks. But now when I am sending this state to GameList component it gives me: Type '{ games: GameType[]; }' is not assignable to type 'IntrinsicAttributes & GameType[]'. Property 'games' does not exist on type 'IntrinsicAttributes & GameType[]'. Updated question.

Nicholas Tower Over a year ago

Please show us the GameList component and its types.

Collectives™ on Stack Overflow

Setting initial state array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related