MobX how to make imported component observable?

Question

In my code I am using external library for rendering table its called antd. I want to re render this imported component when my store state changes but I am unable to make this component observable as its is imported component and it uses data passed as props.

It only worked when I also rendered this store data in main component so it triggered re rendering also this child imported componeent. But don't want to return this data in the main component i want to only return it in the table.

import React from 'react';
import { Table } from 'antd';

@inject('meetingsStore')
@observer
export default class MeetingNotes extends React.Component {

 render() {
    const meetingsStore = this.props.meetingsStore;
    const { agendaPoints } = meetingsStore.getCurrentMeeting();

    return (
      <Table
        rowKey="id"
        columns={columns}
        dataSource={agendaPoints}
        pagination={false}
      />
    );
  }

}

When I update the store state I want this Table component to re-render.

score 0 · Answer 1 · answered Oct 22 '19 at 10:11

I managed to fix it by using mobx toJS

Here is an example working code if someone will face a similar issue.

import React from 'react';
import { Table } from 'antd';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';

@inject('meetingsStore')
@observer
export default class MeetingNotes extends React.Component {

 render() {
    const meetingsStore = this.props.meetingsStore;
    const { agendaPoints } = meetingsStore.getCurrentMeeting();

    return (
      <Table
        rowKey="id"
        columns={columns}
        dataSource={toJS(agendaPoints)}
        pagination={false}
      />
    );
  }

}

score 0 · Answer 2 · answered Jun 09 '20 at 17:05

I believe that React components work with Mobx, they should be completely rebuilt for this library. Observer components if they are directly accessed by render. Look a similar problem in my question Ant-Design Table not rendering when change state in mobx store

MobX how to make imported component observable?

2 Answers2