How to start rendering components from MobX map react?

D

Destell2019-04-03 12:24:31

JavaScript

Destell, 2019-04-03 12:24:31

To allow multiple modal windows to be used at the same time, I put them in observable.map() like this

@observable modals = observable.map();

@action('add modal')
    addModal = component => {
        const id = createGuid();
        this.modals.set(id, component);
    };

    @action
    removeModal = id => {
        this.modals.delete(id);
    };

newModal = close => {
        return (
            <ModalWrap>
                <Overlay onClick={close} />
                <Body>
                    <div>content</div>
                    <Close action={close}>❌</Close>
                </Body>
            </ModalWrap>
        );
    };

Then I need to display them in the right place. i am trying to use something like

<>
{modals.entries().map(({ id, modal }) => (
                    <React.Fragment key={id}>
                        {modal(this.onClose(id))}
                    </React.Fragment>
                ))}
</>

modals.entries() according to the documentation should provide [key, value]. Then it "renders" entries(...).map is not a function to the console. Where is the mistake?

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

0

0xD34F, 2019-04-03
@Destell

modals.entries() according to the documentation should provide [key, value]

No, it shouldn't. It returns an iterator, not an array. So that

[...modals.entries()].map(([ id, modal ]) => (

))