Getting an null pointer exception in react component

Question

I am doing a API call and fetching the data in the componentDidMount in PatientPage.js. Since the render method calls before the componentDidMount when rendering the PatientList.js I'm getting an error in the PatientList bootstrapTable. The reason is since the data is not been fetched yet, the attribute 'data'(this.props.patientList) in PatientList is null.

PatientPage.js:

class PatientPage extends Component {

        static propTypes = {
            patientState: PropTypes.object.isRequired,
            fetchPatientList: PropTypes.func.isRequired,
        };

        componentWillMount() {
            this.props.fetchPatientList();
        }


        render() {

            return (
                <div className="content-wrapper">
                    <PatientList
                        patientList={ this.props.patientState.patientList }
                    />          
                </div>
            );

        }
    }

PatientList.js:

import React, { Component, PropTypes } from 'react';
import { dateFormatter } from 'Util';
import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';

class PatientList extends Component {

    static propTypes = {
        patientList: PropTypes.Object,
    };

    render() {
        const data = this.props.patientList;
        return (
           <div className="box-body">     
           <div id="PatientManagementTable" className="box-body firstRowHdnTbl table-header-custom">
        <BootstrapTable data={ data } striped={ true }>
            <TableHeaderColumn dataField='patientId' isKey={ true } dataSort={ true }>Patient ID</TableHeaderColumn>
            <TableHeaderColumn dataField='patientName' dataSort={ true }>Patient Name</TableHeaderColumn>
            <TableHeaderColumn dataField='patientType' dataSort={ true }>Patient Type</TableHeaderColumn>
        </BootstrapTable>
           </div>
           </div>
        );

    }

}

export default PatientList;

Ivan Mjartan · Accepted Answer · 2017-06-15 12:35:08Z

what you can do is check for PatientList props is null or not in PatientList component. If value is null you can render progress and massage "Loading data" or you return empty div, when fetch will be complete than you can safely render content.

import React, { Component, PropTypes } from 'react';
import { dateFormatter } from 'Util';
import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';

class PatientList extends Component {

    static propTypes = {
        patientList: PropTypes.Object,
    };

    render() {
        const data = this.props.patientList;
        if(data == null) {
           // render progress or message
           return <div> Loading data ... </div>
        } else {

        return (
           <div className="box-body">     
           <div id="PatientManagementTable" className="box-body firstRowHdnTbl table-header-custom">
        <BootstrapTable data={ data } striped={ true }>
            <TableHeaderColumn dataField='patientId' isKey={ true } dataSort={ true }>Patient ID</TableHeaderColumn>
            <TableHeaderColumn dataField='patientName' dataSort={ true }>Patient Name</TableHeaderColumn>
            <TableHeaderColumn dataField='patientType' dataSort={ true }>Patient Type</TableHeaderColumn>
        </BootstrapTable>
           </div>
           </div>
        );

      }
    }

}

export default PatientList;

My suggestion is add into store one item to monitor progress of loading data, item could be enum (sorry for TypeScript) and default value could be NotLoaded, when you start loading data you can set Processing in the end you can set Error or Done. In Parent list you have to add this item int props and in render method you can display data error message progress etc.

/** Init enum */
export enum Init {
    NotLoaded = 0,
    Done = 1,
    Error = 2,
    Processing = 3
}

than you will be able react to error state progress state etc.

Collectives™ on Stack Overflow

Getting an null pointer exception in react component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related