react.js typescript problem with JSON Array

Question

I'm trying to get myself familiarized with react.js with typescript. I tried to declare a Array of JSON, but it gives me error saying ... is not assignable to JSON

Here is my code:

import React from 'react';
type MyProps = {
    message?: string;
};
type MyState = {
    chat_list : Array<JSON>
    count: number; // like this
};
class ChatList extends React.Component<MyProps, MyState> {
    state: MyState = {
        count: 0,
        chat_list : [
            {
                "name":"true",
                "active" : true
            }
        ]
    };
    ...

How can I resolve this?

nanobar · Accepted Answer · 2020-03-21 09:50:20Z

3

You should define the shape of a chat item, JSON is an actual global object with a specific shape (JSON.stringify, JSON.parse etc)

    interface ChatItem {
      name: string;
      active: boolean;
    }

    interface MyState {
      chat_list: Array<ChatItem>; // Or ChatItem[]
      count: number;
    }

   state: MyState = {
      count: 0,
      chat_list: [
        {
          name: 'true',
          active: true,
        },
      ],
    };

answered Mar 21, 2020 at 9:50

nanobar

66.8k26 gold badges155 silver badges178 bronze badges

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

5 Comments

Danial Over a year ago

thanks it worked, out of curiosity just asking, instead of declaring an interface can I use a per-declared class ?? cause I already have one class alternative to ChatItem as ChatListItem

nanobar Over a year ago

Not sure what you mean by per declared class? As in define something just for the class? The interface or type can be scoped to inside a function or file if that's what you mean

Danial Over a year ago

i tried to mean pre-declared class, I want access it from all of my classes ..

Danial Over a year ago

just decalare in an another file, or better way, something like declaring as props or something , new to react-typescript

nanobar Over a year ago

yeah for shared types I recommend you have a file like types.ts and import from there, which also avoids circular dependency issues. There are also "ambient declaration files" alternatively but I think simpler to stick to that.

Collectives™ on Stack Overflow

react.js typescript problem with JSON Array

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related