How to delete a row in a table using React?

Question

I have a table which is a Table component from Material UI. I fetch data from an API and then display the data in the table. The table updates all rows based on events received from web socket. My requirement is when a row say with ID 10 has one of its row values as Closed, I want to remove that particular row from the table. Im using an array to store the data from API and then using map() to render them in individual rows.

    mapTableData = (TableData) => {
const newTableData = tempTableData.map((item, index) => ({
  ...item,
  Column1: () =>
    <p>
      {item.parameter1}
    </p>,
  Column2: () =>
   ........

When an event arrives on web socket and the value of {item.parameter1} changes to 'Closed' I want to remove that particular row from the table. How do implement this? I tried using conditional check for every column but it just gives me a blank row and wont remove it.

bcr · Accepted Answer · 2017-10-27 20:10:19Z

1

You can use filter which will iterate over the items twice:

const render = (tableData) => {
    return tableData
        .filter(row => row.id !== 10)
        .map(row => {
            // render logic
        })
}

Or, more efficiently, use reduce:

const render = (tableData) => {
    return tableData
        .reduce((aggr, row) => {
            if (row.id !== 10) {
                const jsx = ''; // some logic
                aggr.push(jsx);
            }

            return aggr;
        }, []);
}

answered Oct 27, 2017 at 20:10

bcr

3,82120 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to delete a row in a table using React?

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