How to hide data rows with certain value with a button?

Question

I use react-bootstrap-table-next. And want to use a toggle button which hide or show rows with a certain value. But the problem is that the table content doesn't change.

import BootstrapTable from 'react-bootstrap-table-next';

const products = [
  {id: 0, name: 'item 0', price: 4},
  {id: 1, name: 'item 1', price: 5},
  {id: 2, name: 'item 2', price: 3},
  {id: 3, name: 'item 3', price: 5},
]

const columns = [{
  dataField: 'id',
  text: 'Product ID'
}, {
  dataField: 'name',
  text: 'Product Name',
}, {
  dataField: 'price',
  text: 'Product Price',
}];

const handleClick = () => {
  for (i=0; i> products.length; i++) {
    if (products[i]["price"] === 5) {
      products.slice(i, 1);
    }
  }
};

export default () => (
  <div>
    <button className="btn btn-lg btn-primary" onClick={ handleClick }>hide data </button>

    <BootstrapTable keyField='id' data={ products } columns={ columns } />
  </div>
);

Please don't insult other users or revert changes that improve posts. — TylerH, Apr 26 '22 at 21:31
I didn't want insult you! I apologize myself if you feel insulted. But I still use ``react-bootstrap-table-next`` and not ``react-bootstrap-table``! — ikreb, Apr 27 '22 at 07:37
I understand the concern, but react-bootstrap-table-next is just the npm module name due to npm conflicts; the actual plugin/product name is react-bootstrap-table2, which is just the latest version of react-bootstrap-table (since the original version was deprecated/replaced). [tag:react-bootstrap-table] refers to/covers both the original v1 plugin and the newer v2/vnext version. That aside, tag names don't belong in question titles. — TylerH, Apr 27 '22 at 14:45
@TylerH Ok. I understand why you had changed it. I totally agree with the headline change. But I think it is important to mention that I use v2/next. So I am fine with your current changes! Thank you. — ikreb, Apr 27 '22 at 15:58

score 1 · Accepted Answer · answered Apr 26 '22 at 06:26

The problem is that you are trying to update products, but on every re-render, it will reset to its initial value (Because it's defined outside the component's function). So, the value of products will always be the same.

One solution is to move products inside the component and create a state for it.

You can reshape your code like this:

import BootstrapTable from 'react-bootstrap-table-next';
import { useState } from 'react';

const columns = [{
    dataField: 'id',
    text: 'Product ID'
}, {
    dataField: 'name',
    text: 'Product Name',
}, {
    dataField: 'price',
    text: 'Product Price',
}];

const MyComponent = () => {
    const [products, setProducts] = useState([
        { id: 0, name: 'item 0', price: 4 },
        { id: 1, name: 'item 1', price: 5 },
        { id: 2, name: 'item 2', price: 3 },
        { id: 3, name: 'item 3', price: 5 },
    ]);

    const handleClick = () => {
        let temp = products;
        for (i = 0; i > temp.length; i++) {
            if (temp[i]["price"] === 5) {
                temp.slice(i, 1);
            }
        };

        setProducts(temp);
    };

    return (
        < div >
            <button className="btn btn-lg btn-primary" onClick={handleClick}>hide data </button>

            <BootstrapTable keyField='id' data={products} columns={columns} />
        </div >
    )
};

export default MyComponent;

How to hide data rows with certain value with a button?

1 Answers1