ReactJS Bind Data from Rest API to table

Question

I am calling my rest endpoint to fetch data, which I can see is successfully being fetched and stored in the state. However the table is not displaying any data. Ideally I want it to work so that when the state is changed the table automatically refreshes.

import React from 'react';
import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';

const parameterTypes = {
    0: 'STRING',
    1: 'BOOLEAN',
    2: 'INTEGETR',
    3: 'DECIMAL'
};

const categoryAvailable = {
    0: 'POS'
};

const options = {
    noDataText: 'No parameters founds.'
}

function enumFormatter(cell, row, enumObject) {
    return enumObject[cell];
}

export default class ParameterContainer extends React.Component {

    constructor() {
        super();
        this.state = { parameters: [] };
    }

    componentDidMount() {
        fetch('/api/parameters')
            .then(result => result.json())
            .then(params => {
                console.log(params);
                this.state.parameters = params;
                console.log(this.state);
            })
    }

    render() {
        return (
            <div>
                <h2>Parameters</h2>
                <BootstrapTable data={this.state.parameters} options={options}>
                    <TableHeaderColumn isKey dataField='id'>ID</TableHeaderColumn>
                    <TableHeaderColumn dataField='category' filterFormatted dataFormat={enumFormatter}
                                        formatExtraData={categoryAvailable} filter={{ type: 'SelectFilter', options: categoryAvailable }}>Category</TableHeaderColumn>
                    <TableHeaderColumn dataField='subCategory'>Sub Category</TableHeaderColumn>
                    <TableHeaderColumn dataField='parameter'>Parameter</TableHeaderColumn>
                    <TableHeaderColumn dataField='type' filterFormatted dataFormat={ enumFormatter }
                                       formatExtraData={parameterTypes} filter={{ type: 'SelectFilter', options: parameterTypes}}>Type</TableHeaderColumn>
                    <TableHeaderColumn dataField='roles'>Roles</TableHeaderColumn>
                </BootstrapTable>
            </div>
        )
    }
}

anthonygood · Accepted Answer · 2017-02-16 18:05:24Z

3

You shouldn't mutate a component's state directly (only read from it). Use this.setState({parameters: params}) in order to play nicely with the component lifecycle.

answered Feb 16, 2017 at 18:05

anthonygood

4304 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ReactJS Bind Data from Rest API to table

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