Bdtjtk

I am using this.context to get context data inside the lifecycle methods, but when I am not wrapping component with Consumer, then when context data changes, my component is not getting rerendered.

So instead of this:

render() {

        console.log('companies render');

        const { modal, singleCompanyData, loading } = this.state;

        const { itemsPerPage } = this.props;

        const columns = [

            { key: 'id', title: 'ID' },

            { key: 'title', title: 'Title' },

            { key: 'city', title: 'City' },

            { key: 'btn', title: 'Action' }

        ];

        return (

            <SharedDataConsumer>

                {({ companies }) => (

                    <React.Fragment>

                        <Companies

                            columns={columns}

                            data={companies}

                            addCompany={this.addCompany}

                            totalRecords={companies.length}

                            loading={loading}

                            itemsPerPage={itemsPerPage}

                        />

                        <AM2Modal open={modal} handleModalClose={this.handleModalClose}>

                            <CompaniesEdit

                                singleCompanyData={singleCompanyData}

                                handleModalClose={this.handleModalClose}

                                inputChangeEvent={this.inputChangeEvent}

                            />

                        </AM2Modal>

                    </React.Fragment>

                )}

            </SharedDataConsumer>

        );

    } 

I need to use something like this, in order to format that data before render:

render() {

        console.log('companies render');

        const { modal, singleCompanyData, loading } = this.state;

        const { companies } = this.context;

        const { itemsPerPage } = this.props;

        const newComp = companies.map(value => ({

           ...value,

           btn: this.actionBtns(value.id)

        }));

        const columns = [

            { key: 'id', title: 'ID' },

            { key: 'title', title: 'Title' },

            { key: 'city', title: 'City' },

            { key: 'btn', title: 'Action' }

        ];

        return (

            <React.Fragment>

                <Companies

                    columns={columns}

                    data={newComp}

                    addCompany={this.addCompany}

                    totalRecords={companies.length}

                    loading={loading}

                    itemsPerPage={itemsPerPage}

                />

                <AM2Modal open={modal} handleModalClose={this.handleModalClose}>

                    <CompaniesEdit

                        singleCompanyData={singleCompanyData}

                        handleModalClose={this.handleModalClose}

                        inputChangeEvent={this.inputChangeEvent}

                    />

                </AM2Modal>

            </React.Fragment>

        );

    }

But this way, component is not getting updated after context changes - context data is async.

I did research and saw this example where they wrap export and pass context data as props, but not sure if thats the correct way to go with latest context API?

Full code here.