React component isn't redrawn when a filter is applied

[JCShauni]

Hello, I'm having a issue really close to the issue #303 but with something a little different.

Quick description : I use a react-bootstrap-table2 with sorting for my user list. Each user can have "git-like tags" which are rendered by a react component.

The "Tag" button on the right allows the user to add or remove a users tag, my state.users is updated and the tag is automatically added to the "tag list" on the left.

But, when a filter is added on the "First name" part and a tag is added, the component is not redrawn, despite the state being correct.

Removing the filter make the component redrawn and the tag appears in the tag list.

Code

-package.json

    "react-bootstrap-table-next": "^0.1.15",
    "react-bootstrap-table2-filter": "^0.3.2",
    "react-bootstrap-table2-paginator": "^0.1.1"

-Users.jsx

.....
class Users extends React.Component {
constructor(props) {
    super(props);

    const self = this;

    this.state = {
      users: null,
      tags: null
    };
}

function nameColumnFormatter(cell, row, rowIndex, formatExtraData) {
      const firstName = !row.isActive
        ? `${row.firstName} (${self.props.t('inactive')})`
        : row.firstName;
      return (
        <div>
          {firstName}
          <TagsList selectedIds={row.tags} tagsList={self.state.tags} />
        </div>
      );
    }

this.columns = [
      {
        dataField: 'firstName',
        text: this.props.t('First name'),
        sort: true,
        filter: textFilter({
          placeholder: this.props.t('column_filter')
        }),
        formatter: nameColumnFormatter
      },

.......


render() {
    return (
      <div className="container">
        <h1 className="h2">
          {this.props.t('Users')}
          <Link to={`/users/new`}>
            <button className="btn btn-primary btn-sm ml-2">{this.props.t('Add')}</button>
          </Link>
        </h1>
        <BootstrapTable
          keyField="id"
          data={this.state.users}
          columns={this.columns}
          striped
          hover
          condensed
          filter={filterFactory()}
          pagination={paginationFactory(this.paginationOptions)}
          classes="table-sm"
          defaultSorted={this.defaultSorted}
        />
      </div>
    );
  }

TagsList.jsx

class TagsList extends React.Component {
  constructor(props) {
    super(props);
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps) {
      console.log(nextProps);
    }
   
  }

  renderTags() {
    const dic = R.indexBy(R.prop('id'), this.props.tagsList || []);

    const liste = R.sortBy(
      R.compose(R.toLower, R.prop('name')),
      (this.props.selectedIds || []).map(x => dic[x])
    );
    const rows = [];
    liste.filter(x => !!x).map(t => {
      const textColor = colorHelper.getTextColorFromHex(t.color);
      rows.push(
        <label className="tags" key={t.id} style={{ color: textColor, backgroundColor: t.color }}>
          {t.name}
        </label>
      );
    });

    return rows;
  }

  render() {
    if (!this.props.selectedIds) return null;
    return <div className="list-tags">{this.renderTags()}</div>;
  }
}

Observations

• When a tag is added to a user when a filter is NOT PRESENT then the componentWillReceiveProps() of TagsList.jsx triggers and the component is rightly re-drawn.

• When a tag is added when a filter IS PRESENT then the componentWillReceiveProps() is not triggered and the tag doesn't appears in the tagsList.

• Removing the text filter entierly will trigger the componentWillReceiveProps() and the tag appears in the list.

Thank you for your work !

[AllenFang]

Hello @JCShauni, I will check this out. however, i also have few question due to I'm not very clear your question.

1. You mean the filter apply, the nameColumnFormatter function is not being called?
2. I saw the nameColumnFormatter use the state.tags, what timing that state.tags will change?
3. Where you define the columns?

[AllenFang]

I have a quick example for checking if the formatter being called when apply filters:

class Table extends React.Component {
  constructor(props) {
    super(props);
    this.state = { products };

    this.columns = [{
      dataField: 'id',
      text: 'Product ID'
    }, {
      dataField: 'name',
      text: 'Product Name',
      filter: textFilter(),
      formatter: cell => `% ${cell} %`
    }, {
      dataField: 'price',
      text: 'Product Price',
      formatter: (cell, row) => {
        return (
          <button onClick={ this.handleTagClick(row.id) }>Click</button>
        );
      }
    }];
  }
  /* eslint no-param-reassign: 0 */
  handleTagClick = rowId => () => {
    const newProducts = this.state.products.map((row) => {
      if (row.id === rowId) {
        row.name += row.name;
      }
      return row;
    });
    this.setState({ products: newProducts });
  }

  render() {
    return (
      <div>
        <BootstrapTable
          keyField="id"
          data={ this.state.products }
          columns={ this.columns }
          filter={ filterFactory() }
        />
        <Code>{ sourceCode }</Code>
      </div>
    );
  }
}

Seems like everything is work fine, How about show me the fully code which can let me work on local.

[AllenFang]

please follow this to update/mutate data in correctly or not you will make react-bootstrap-table recognize your data is not change. Too many people ask the same question. So please I will ask developer to read above doc and figure out how shouldcomponentupdate work and why we need immutable.js sometime.

ping me if you still dont know how to mutate data, thanks

[ranaraya]

I'm using react-bootstrap-table-next version 4.0.3. It is still an issue. Does it mean, I have to go back to earlier version?

[ranaraya]

It would be of help, if someone comment on my question dated May 3rd (above).