How to use static property using typescript mobx

Question

I need to create a card payment page which need to show saved cards. Also it has the capability to save new cards. I am using a static string array to store saved cards. But in html rendering it gives an error that "Property 'cards' is a static member of type 'CardStore'. I am using mobx and typescript.

CardStore.ts

    import {action, computed, observable} from "mobx";

class CardStore {
    @observable public static cardList: string[] = ['testcard1', 'testcard2'];

    @action
    public static addCard =  (card: string) => {
        CardStore.cardList.push(card);
        console.log("------------- add card:" + card)
        console.log("------------- total cards:" + CardStore.cardList.length)
    }

    @computed
    public static get cards() {
        console.log("------------- get total cards:" + CardStore.cardList.length)
        return CardStore.cardList;
    }
}

const store = new CardStore();
export default store;

Cart.tsx

    import {inject, observer} from "mobx-react";
import * as React from "react";
import ItemModel from "../items/item/ItemModel";
import CartStore from "./store/CartStore";
import {Trans} from 'react-i18next';
import EmptyMessage from "./empty-alert/EmptyAlert";
import ItemEntry from "./item-entry/ItemEntry";
import {Card, CardContent} from "@material-ui/core";
import CardStore from "./../cards/store/CardStore";


export class Cart extends React.Component {
    ...
    public render() {
        ...
            return (
                ...
                <Card hidden={!this.isCardPaymentMethodSelected}>
                    <CardContent>
                        <label> Card Selection  </label>
                        <div className="container" id="cards">
                            {CardStore.cards.map(
                                (card) => <label>
                                    <input type="radio" name="selectedCard" value={card} onChange={this.handleCardSelectionChange}/>
                                        {card}
                                </label>)}
                        </div>

                        <div>
                            <label>
                                <input type="radio" name="selectedCard" value="newCard" onChange={this.handleCardSelectionChange}/>
                                Pay with new card
                            </label>
                        </div>
                    </CardContent>
                </Card>
               ...

            );
        }
    }
}

Error is given when "CardStore.cards". How to access this static variable from here?

score 0 · Answer 1 · answered Mar 06 '20 at 06:55

You are exporting an instance from CardStore.ts, you need to also export the class

export class CardStore {
...
}

Then you have to import it like this in your Cart.tsx file:

import {CardStore} from "./../cards/store/CardStore";

Your CardStore class only has static methods/fields so you should directly use the class.

How to use static property using typescript mobx

1 Answers1