React JS: реализация Show / More по отношению к таблице

Question

Я пытаюсь реализовать функциональность show more/show less в отношении таблицы. Ссылка Show More/ Show less должна быть видна только тогда, когда есть более 2 элементов, и показывать меньше должно вернуть к количеству элементов по умолчанию (т.е. 2 в моем случае). Show More должен печатать остальные элементы. Я использую для этого же таблицу реакций. Существует компонент сетки данных, в котором я передаю необходимые реквизиты и пытаюсь реализовать этот лог c в дочернем элементе.

Я пробовал следующее. Может ли кто-нибудь сказать, где я ошибаюсь?

Песочница: https://codesandbox.io/s/react-table-row-table-ryiny?file= / src / index. js

import React from "react";
import ReactTable from "react-table";
import "react-table/react-table.css";

export default class DataGrid extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showMore: false,
    };
  }

  toggleState = () => {
    this.setState(prevState => ({
      showMore: !prevState.showMore
    }), () => {
      const subset: = this.state.showMore ? this.props.data : this.props.data.slice(0, 2);
    });
  }

  renderTableData = () => {
    const { data } = this.props;
    const subset = this.state.showMore ? data : data.slice(0, 2);
    return subset;
  };

  render() {
    const { showMore  } = this.state;
    const { data,columns } = this.props;
    const showLink = data.length > 2;
    return (
            <>
            {showLink && (
              <a onClick={this.toggleState}>
                Show {showMore ? "Less" : "More")}
              </a>
            )}
          <ReactTable
            showPagination={false}
            data={data}
            columns={columns}
          />
        </>
    )
  }
}

Answer 1

'columns' находится в реквизитах, а не в состоянии, и если это единственная функция, которая вам нужна, удалите функцию renderTableData

Попробуйте это

...

export default class DataGrid extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showMore: false,
    };
  }

  toggleState = () => {
    this.setState(prevState => ({
      showMore: !prevState.showMore
    }));
  }

  render() {
    const { showMore } = this.state;
    const { data, columns } = this.props;
    const showLink = data.length > 2;
    const subset = showMore ? data : data.slice(0, 2);
    return (
            <>
            {showLink && (
              <a onClick={this.toggleState}>
                Show {showMore ? "Less" : "More"}
              </a>
            )}
          <ReactTable
            showPagination={false}
            data={subset}
            columns={columns}
          />
        </>
    )
  }
}