I'm sure you saw this article coming after we just learned how to insert records in a Supabase database.

Let's say we accidentally added the wrong country that we want to remove...

How do we go about that?

Rendering a delete button

The first thing we want to add is a delete button so we have something to click on.

We'll use a button with the raw svg from a Fontawesome icon.

<button onClick={() => deleteCountry(country.id)}>
  <svg
    xmlns='http://www.w3.org/2000/svg'
    aria-hidden='true'
    focusable='false'
    role='img'
    viewBox='0 0 448 512'
    width='0.75rem'
  >
    <path
      fill='currentColor'
      d='M32 464C32 490.5 53.5 512 80 512h288c26.5 0 48-21.5 48-48V128H32V464zM304 208C304 199.1 311.1 192 320 192s16 7.125 16 16v224c0 8.875-7.125 16-16 16s-16-7.125-16-16V208zM208 208C208 199.1 215.1 192 224 192s16 7.125 16 16v224c0 8.875-7.125 16-16 16s-16-7.125-16-16V208zM112 208C112 199.1 119.1 192 128 192s16 7.125 16 16v224C144 440.9 136.9 448 128 448s-16-7.125-16-16V208zM432 32H320l-11.58-23.16c-2.709-5.42-8.25-8.844-14.31-8.844H153.9c-6.061 0-11.6 3.424-14.31 8.844L128 32H16c-8.836 0-16 7.162-16 16V80c0 8.836 7.164 16 16 16h416c8.838 0 16-7.164 16-16V48C448 39.16 440.8 32 432 32z'
    />
  </svg>
</button>

You might have spotted the deleteCountry function above. We pass the country id to this function.

So let's go ahead and create the function.

Deleting records from Supabase

This delete country function is super easy, as we can leverage our Supabase setup and simply execute a delete query.

const deleteCountry = async (countryId) => {
    try {
      await supabase.from('countries').delete().eq('id', countryId);
      setCountries(countries.filter((country) => country.id != countryId));
    } catch (error) {
      console.log('error', error);
    }
};

Here you can see the delete query is as simple as calling the delete() method on a row that equals this id.

Then we filter the country from the existing list of countries we are showing to the user.

And all this will result in the following action:

I hope you enjoyed this article. I've uploaded everything to GitHub if you wish to look at your own pace.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter