JSX filter items in array if property matches string, otherwise show all items – SEO

I have created some fake "tasks" json and I need to list it out in JSX which I have done. Now I have some buttons that allow you to view tasks by "All", "Quotes" or "Other". Each task in the JSON file has a "type" property which either has "Quotes" or "Other".

Here is the code where I map through the array and show the information for each task:

<section className={styles.tasks_list}>
        {tasksData.map(({ customer_id, account_name, days }) => {
          return (
            <article key={customer_id} className={styles.task}>
              <span className={styles.task_name}>{account_name}</span>

              <span className={`${styles.task_days}`}>{getDaysDue(days)}</span>

              <div className={styles.task_buttons}>
                <button className={`${styles.task_button} ${styles.edit}`}>
                  <MdModeEdit />
                </button>

                <button className={`${styles.task_button} ${styles.delete}`}>
                  <MdDeleteForever />
                </button>
              </div>
            </article>
          );
        })}
      </section>

Of course this displays ALL data.

I have state which updates and saves the current active tab’s value – so if the quote button is selected, I can access the variable activeTab and get the string "Quotes", same for "Other". When the All button is clicked it changes this string to "All". Now none of my json objects have the "All" type because I want it to display everything regardless of type.

Here is the json:

[
  {
    "account_name": "Misty's Gym",
    "customer_id": 1,
    "days": {
      "days_due": 1,
      "overdue": false
    },
    "type": "Quotes"
  },
  {
    "account_name": "Brock's Diner",
    "customer_id": 2,
    "days": {
      "days_due": 0,
      "overdue": false
    },
    "type": "Quotes"
  },
  {
    "account_name": "Samurai Champloo's Fish Bar",
    "customer_id": 3,
    "days": {
      "days_due": 5,
      "overdue": false
    },
    "type": "SSL Setup"
  },
  {
    "account_name": "Tiny Rebel",
    "customer_id": 4,
    "days": {
      "days_due": 7,
      "overdue": true
    },
    "type": "Domains"
  },
  {
    "account_name": "Matalan",
    "customer_id": 5,
    "days": {
      "days_due": 13,
      "overdue": false
    },
    "type": "Other"
  },
  {
    "account_name": "Lowes Soft Drinks",
    "customer_id": 6,
    "days": {
      "days_due": 1,
      "overdue": false
    },
    "type": "SEO Setup"
  },
  {
    "account_name": "Snack 'n' Go",
    "customer_id": 7,
    "days": {
      "days_due": 2,
      "overdue": true
    },
    "type": "Quotes"
  },
  {
    "account_name": "Jeronemo",
    "customer_id": 8,
    "days": {
      "days_due": 5,
      "overdue": false
    },
    "type": "Quotes"
  }
]

How can I filter by the strings but then show all of them if the activeTab variable is set to "All"? I might be overthinking this. I’ve run an if statement where it shows the items if (task.type === activeTab) { shit out jsx with information where the type matches } but I don’t know how to then show all.. if I was to do an else statement I’d need to copy the exact same JSX which I want to avoid. Also it causes all tabs to just show every task.

I feel like there’s something obvious I’m not thinking about. My code is a mess and it’s almost 5am, should probably sleep!

Any help appreciated, thank you.