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

Looks like dataFormat expects a single value, wrap your buttons into a root element (div for example), or into a fragment if supported.