CODEWITHSUNDEEP
reactjsreact-bootstrap-table
Algorithmic Programmer
Algorithmic Programmer

Reputation: 766

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

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>
    );
  }


}

Upvotes: 0

Views: 3240

Answers (2)

Basavaraj Hadimani
Basavaraj Hadimani

Reputation: 1094

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.

Upvotes: 0

FisNaN
FisNaN

Reputation: 2865

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.

Upvotes: 1

Related Questions