Ошибка инвариантного нарушения при возврате ссылки как dataFormatter в реакции

Question

В заголовке столбца таблицы я хочу вернуть ссылки, которые переходят в режим редактирования каждого из этих заголовков. Я использую реагирующую bootstrap -таблицу и создал собственный конструктор данных в конструкторе моего компонента

class Grid extends Component {
  constructor(props) {
    super(props);
    this.anchorFormatter = (cell, row, slug) => {
      let link = "/"+slug;
      return (
        <Link to={link}>
          {cell}
        </Link>
      )
  }

Затем я называю эти данные отформатированными в таблице

<TableHeaderColumn isKey dataField="title" dataSort dataFormat={ this.anchorFormatter }>Title</TableHeaderColumn>

Это сообщение об ошибке

Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `TableBody`.

Вторая часть - как передать значение slug в средство форматирования данных? Я получаю такие данные из API запроса get. Вызов

{
  "title": "Experiments in DataOps",
  "status": true,
  "publish_date": "2020-01-29",
  "slug": "experiments-in-dataops"
},

Answer 1

Другой подход - создать класс или функцию, а затем использовать ее в качестве компонента, здесь я создаю компонент

class BlogAnchor extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <Link to={this.props.link}>&nbsp;{this.props.linkText}&nbsp;</Link>
        );
    }
}

, затем в классе Grid у меня есть функция

anchorFormatter(cell, row) {
    let link = "blogs/" + row.slug;
    return <BlogAnchor link={link} linkText={cell} />;
}

, который также зарегистрирован в конструкторе класса Grid

this.anchorFormatter = this.anchorFormatter.bind(this);

И столбец таблицы ссылается на эту функцию

<TableHeaderColumn isKey dataField="title" dataSort dataFormat {this.anchorFormatter}>Title</TableHeaderColumn>

Answer 2

Мне пришлось использовать необработанные теги html вместо ссылки, чтобы это работало, т.е.

const anchorFormat = (cell,row) => {
  let link = '#/blogs/' + row.slug;
  return ( <div><a className="nav-link" href={link}>{cell}</a></div>);
}