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` }
]

@Yurii please add your comment as an answer. Although, I am reading this after I figured it out :D Thanks! — Ajay Gupta
– Ajay Gupta, Commented Feb 13, 2018 at 10:34
@RaviSaxena I don't really remember, it was like 2 years ago. But I'll take a look at the code and get back to you. — Ajay Gupta
– Ajay Gupta, Commented Mar 25, 2020 at 14:44
i got solution. Below answer is correct. Thanks for your response. — Ravi Saxena
– Ravi Saxena, Commented Mar 26, 2020 at 15:38

Yurii · Accepted Answer · 2018-02-13 10:50:11Z

2

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

answered Feb 13, 2018 at 10:50

Yurii

1265 bronze badges

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related