Not able to render a React element in React-BootStrap-Table

Question

I want to render buttons in react-bootstrap-table. However, If I pass a React component as the content, the table is render with [object Object] .

Here's the code I've tried so far:

// Imports
import React, { Component } from "react";
import { Link } from "react-router-dom";
import { BootstrapTable, TableHeaderColumn } from "react-bootstrap-table";
import "../../../node_modules/react-bootstrap-table/css/react-bootstrap-table.css";

// Exports
export default class Table extends Component {
  constructor(props) {
    super(props);

    // Defaults
    this.props.options.search = this.props.options.search ? true : false;
    this.props.options.pagination = this.props.options.pagination ? true : false;
  }

  // Option Buttons
  optionButtons = (cell, row) => {
    return cell.map(item => {
      let key = Object.keys(item)[0];
      return (
        <Link to={item[key]} className="btn btn-sm">
          {key}
        </Link>
      );
    });
  };

  // This works however
  // optionButtons = (cell, row) => {
  //   return <Link to="/some/route" className="btn btn-sm">Action</Link>;
  // };

  render() {
    let headings = this.props.columns.map((heading, index) => {
      let key = Object.keys(heading)[0];
      if (index === 0) {
        return (
          <TableHeaderColumn
            key={heading[key]}
            dataSort={heading.sortable ? true : false}
            dataField={key}
            width={
              heading.width && !isNaN(heading.width)
                ? heading.width.toString()
                : null
            }
            isKey
          >
            {heading[key]}
          </TableHeaderColumn>
        );
      }
      if (key === "options") {
        return (
          <TableHeaderColumn
            key={heading[key]}
            dataFormat={this.optionButtons}
            dataField={key}
            width={
              heading.width && !isNaN(heading.width)
                ? heading.width.toString()
                : null
            }
          >
            {heading[key]}
          </TableHeaderColumn>
        );
      }
      return (
        <TableHeaderColumn
          key={heading[key]}
          dataSort={heading.sortable ? true : false}
          dataField={key}
          width={
            heading.width && !isNaN(heading.width)
              ? heading.width.toString()
              : null
          }
        >
          {heading[key]}
        </TableHeaderColumn>
      );
    });

    return (
      <BootstrapTable
        data={this.props.data}
        search={this.props.options.search}
        pagination={this.props.options.pagination}
      >
        {headings}
      </BootstrapTable>
    );
  }
}

The data I am passing to the options key is an array with multiple objects. The problem is in rendering the option buttons. The idea is to be able to pass the number of buttons/link I want from a component and they will be rendered.

This is the data being passed to the options key:

options: [
  { Edit: `/item/${item.id}/edit` },
  { Delete: `/item/${item.id}/delete` }
]

Answer 1

看起来dataFormat需要单个值，将按钮包装到根元素（例如div ）中，或者包装到片段（如果支持）中。