Can't display my data in a react-bootstrap-table

Question

This is my React class prior to implementing react-bootstrap-table (it works, it prints what it's it's supposed to):

class ResultItem extends ComponentBase {

constructor(props) {
  super(props);

 this.state = {
  key: null,
  description: '',
  start_date: '',
  end_date: '',
  vendor_name: {},
  buyer_name: {},
  preview_file: '',
 };
}

render() {
 const data = this.props;
 return (
   <div>
    {data.title}
    {data.description}
    {data.start_date}
    {data.end_date}
    {data.vendor_name}
    {data.buyer_name}
   </div>
   );
  }
 }

I want to show this information inside a react-bootstrap-table. This is my attempted implementation shown below. The table says there's no data to display, so I must not be hooking up to the information correctly.

class ResultItem extends ComponentBase {

  constructor(props) {
    super(props);

    this.state = {
      key: null,
      description: '',
      start_date: '',
      end_date: '',
      vendor_name: {},
      buyer_name: {},
      preview_file: '',
    };
  }

  render() {
    const data = this.props;
    return (
      <BootstrapTable data={this.props.data}>
        <TableHeaderColumn dataField="title" isKey={true}>Title</TableHeaderColumn>
        <TableHeaderColumn dataField="start_date">Start Date</TableHeaderColumn>
        <TableHeaderColumn dataField="end_date">End Date</TableHeaderColumn>
        <TableHeaderColumn dataField="vendor_name">Vendor</TableHeaderColumn>
        <TableHeaderColumn dataField="buyer_name">Buyer</TableHeaderColumn>
      </BootstrapTable>
    );
  }


}

FisNaN · Accepted Answer · 2018-03-03 10:33:06Z

1

There is a basic example https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/basic/basic-table.js

The data should be an array of objects, not a single object.
I can't see any usage of the state, so you might consider to remove that part.

answered Mar 3, 2018 at 10:33

FisNaN

2,9152 gold badges30 silver badges43 bronze badges

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

Comments

Basavaraj Hadimani · Accepted Answer · 2019-01-31 10:26:42Z

0

Change your code as below :

 <BootstrapTable data={[this.props.data]}>

The data you are giving to BootstrapTable data is an object. Make it an array

if above answer doesn't solve your problem, Please check type of this.props.data

If this.props.data is an object of objects then convert it into array of objects.

answered Jan 31, 2019 at 10:26

Basavaraj Hadimani

1,10412 silver badges23 bronze badges

Collectives™ on Stack Overflow

Can't display my data in a react-bootstrap-table

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related