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


}

Answer 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.

Answer 2

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.