How to filter/remove elements from an array within a Store

If I have the following

createStore

createStore

createStore

createStore invocation:

export type WeeklyTimesheetSubmission = {
  readonly cards: TimesheetCard[];
};

function SomeComponent() {
  const [submission, setSubmission] = createStore<WeeklyTimesheetSubmission>({
    cards: [],
  });
}

export type WeeklyTimesheetSubmission = {
  readonly cards: TimesheetCard[];
};

function SomeComponent() {
  const [submission, setSubmission] = createStore<WeeklyTimesheetSubmission>({
    cards: [],
  });
}

export type WeeklyTimesheetSubmission = {
  readonly cards: TimesheetCard[];
};

function SomeComponent() {
  const [submission, setSubmission] = createStore<WeeklyTimesheetSubmission>({
    cards: [],
  });
}

export type WeeklyTimesheetSubmission = {
  readonly cards: TimesheetCard[];
};

function SomeComponent() {
  const [submission, setSubmission] = createStore<WeeklyTimesheetSubmission>({
    cards: [],
  });
}

What is the proper way to filter/remove an element from that

cards

cards

cards

cards list? I have tried the following and I get yelled at by TypeScript saying it's incorrect.

setSubmission("cards", (c) => c.id !== card.id); // Attempt 1: Fail
setSubmission("cards", (c) => c.id !== card.id, undefined!) // Attempt 2: Fail

setSubmission("cards", (c) => c.id !== card.id); // Attempt 1: Fail
setSubmission("cards", (c) => c.id !== card.id, undefined!) // Attempt 2: Fail

setSubmission("cards", (c) => c.id !== card.id); // Attempt 1: Fail
setSubmission("cards", (c) => c.id !== card.id, undefined!) // Attempt 2: Fail

setSubmission("cards", (c) => c.id !== card.id); // Attempt 1: Fail
setSubmission("cards", (c) => c.id !== card.id, undefined!) // Attempt 2: Fail

Since the

cards

cards

cards

cards field is at the top level, is the only option to reference the previous value of the store?

setSubmission((prev) => ({ ...prev, cards: prev.cards.filter((c) => c.id !== card.id) }))

setSubmission((prev) => ({ ...prev, cards: prev.cards.filter((c) => c.id !== card.id) }))

setSubmission((prev) => ({ ...prev, cards: prev.cards.filter((c) => c.id !== card.id) }))

setSubmission((prev) => ({ ...prev, cards: prev.cards.filter((c) => c.id !== card.id) }))

How to filter/remove elements from an array within a Store

Similar Threads

Similar Threads

Similar Threads