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
– TylerH, Commented Apr 26, 2022 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
– ikreb, Commented Apr 27, 2022 at 7: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). 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
– TylerH, Commented Apr 27, 2022 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
– ikreb, Commented Apr 27, 2022 at 15:58

Joey · Accepted Answer · 2022-04-26 06:26:31Z

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;

Collectives™ on Stack Overflow

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

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