TSX component array, component inside array

Question

I am trying to have a child component array in tsx and then add an instance to the array in this code:

import ShoppingList from './ShoppingList';    
interface TPState {
  shoppingLists2: ShoppingList[];
  shoplistsums: number[];
  sum: number;
}

class TotalPrice extends React.Component<{}, TPState> {
  constructor(props: {}) {
    super(props);
    this.state = {
      shoppingLists2: [ShoppingList],
      sum: 0
    }
  }

but I am getting an error that it is not assignable. I am using the array to add the component on button presses in the page and I am adding the initial item like this. Why is it wrong?

what is ShoppingList at this line `shoppingLists2: [ShoppingList]` ? — John Ruddell, Jun 26 '18 at 07:59
no it is a component, i want the array to hold these kind of components as type — jhonathan myers, Jun 26 '18 at 08:01
ok so just cast it `shoppingLists2: [ShoppingList] as ShoppingList[]` — John Ruddell, Jun 26 '18 at 08:01
Type '(typeof ShoppingList)[]' cannot be converted to type 'ShoppingList[]'. — jhonathan myers, Jun 26 '18 at 08:05

John Ruddell · Answer 1 · 2018-06-26T08:14:04.447

0

Not sure what error message you are getting, it could be 2 things. first you can specify that the [ShoppingList] is cast as a type. also you need to specify all of the state parameters

class TotalPrice extends React.Component<{}, TPState> {
  public state = {
    shoppingLists2: [ShoppingList] as ShoppingList[], //  as ShoppingList[] may not be needed but dont know without the error message
    sum: 0,
    shoplistsums: [] // you were missing this item in your state, proabably what the issue was
  }
}

EDIT: you need to define a type for shopping list.. instead of using it as a type.

interface IShoppingList {
  someKey: number
  someOtherKey: string
}

then your state type

interface TPState {
  shoppingLists2: IShoppingList[];
  shoplistsums: number[];
  sum: number;
}

edited Jun 26 '18 at 08:14

answered Jun 26 '18 at 08:04

John Ruddell

25,283
6
57
86

ok if i add all 3 states and dont cast then this is the error: Type '{ shoppingLists2: (typeof ShoppingList)[]; sum: number; shoplistsums: undefined[]; }' is not assignable to type 'Readonly'. Types of property 'shoppingLists2' are incompatible. Type '(typeof ShoppingList)[]' is not assignable to type 'ShoppingList[]'. Type 'typeof ShoppingList' is not assignable to type 'ShoppingList'. Property 'handleText' is missing in type 'typeof ShoppingList'. – jhonathan myers Jun 26 '18 at 08:09
@jhonathanmyers you need to define a type for your shopping list.. in your interface you specify it is of type shoppinglist array but that is actually the type `typeof ShoppingList[]` – John Ruddell Jun 26 '18 at 08:11
like this? shoppingList: ShoppingList; shoppingLists2: shoppingList[]; but this is not working so probably no – jhonathan myers Jun 26 '18 at 08:14
@jhonathanmyers look at my edit.. you need to define a type for your array. then use that type if you are still having errors its going to be hard to fix without something to test off of. can you create a codepen with an example of it not working? – John Ruddell Jun 26 '18 at 08:15
yeah, but if i have that interface, how do i add the component still? also i am trying it in a different way now maybe you could take a look : https://stackoverflow.com/questions/22876978/loop-inside-react-jsx – jhonathan myers Jun 26 '18 at 10:06
Like I said, I need context. Please post a codepen showing the issue. Hard to help with the information provided – John Ruddell Jun 26 '18 at 15:59

TSX component array, component inside array

1 Answers1