Highlighting or removing a row based on the click of a button in that row

Question

I'm using React-Table and I have two buttons in the first cell of each row of my table and the code looks like this:

const columns = React.useMemo(
 () => [

 {
    Header: 'Available Aliens',
    columns: [
    {
        Header: 'Generate/Kill',
        className: "lifeForceRow",
        Cell: ({ row }) =>
                       <div>
                           <Button variant="success" onClick={() => 
                            handleGenerate(row.original.id)}>Generate</Button>
                           <Button variant="danger" onClick={() => 
                            handleKill(row.original.id)}>Kill</Button>
                       </div>
    },

    {
        Header: 'Planet',
        accessor: 'planetName'
    },
    {
        Header: 'Galaxy',
        accessor: 'galaxyName'
    }
            ]
        }
    ],
    []
)

And then the two functions that handle each click look like this:

const handleGenerate = (e) => {
    alert("Alien Generated");
}

const handleKill = (e) => {
    alert("Alien Killed");
}

Is there a way to remove the row when I click the Kill button and a way to highlight the row if I click the Generate button?

I have the buttons working because the alerts pop-up, but I can't figure out how to interact with the row that each button group belongs to.

Thanks!

The code snippet here is not enough to help you. Add the rest of the columns function — aldokkani
– aldokkani, Commented May 5, 2020 at 16:24

aldokkani · Accepted Answer · 2020-05-05 20:13:27Z

1

I suppose since you are using react-table you have defined data object.
You need to modify this data object, for example filtering out the deleted row.original.id and this should re-render your component with the new rows.

answered May 5, 2020 at 20:13

aldokkani

9211 gold badge9 silver badges19 bronze badges

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

2 Comments

SkyeBoniwell Over a year ago

Yes thanks I have const [data, setData] = React.useState([]); React.useEffect(() => { alienData().then(res => { setData(res.data); }); }, []);

aldokkani Over a year ago

@SkyeBoniwell Then you will need to use setData to update the rows without the deleted one.

Collectives™ on Stack Overflow

Highlighting or removing a row based on the click of a button in that row

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related