remove()

The remove() method deletes a specific item from your collection by its key. This operation triggers updates to collection size and keys.

import { createCollection } from 'finalstore';
 
const users = createCollection({
  states: {
    name: '',
    age: 0,
    active: true
  },
  actions: {}, // Required, even if empty
  selectors: {} // Required, even if empty
});

Basic Usage

// Remove a specific user
users.key('user-1').remove();

Inside Components

function UserList() {
  const userIds = users.useKeys();
 
  return (
    <div>
      <h2>Users ({users.useSize()})</h2>
      <ul>
        {userIds.map((userId) => (
          <li key={userId}>
            <UserInfo userId={userId} />
            <button onClick={() => users.key(userId).remove()}>
              Delete User
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

With Confirmation

function DeleteUserButton({ userId }: { userId: string }) {
  const name = users.key(userId).use((s) => s.name);
 
  const handleDelete = () => {
    if (confirm(`Are you sure you want to delete ${name}?`)) {
      users.key(userId).remove();
    }
  };
 
  return <button onClick={handleDelete}>Delete User</button>;
}

On this page