page.jsx

import React from 'react'
import swr from "swr"

import { request } from "~/services/api"
import { arrayParam } from '~/utils/query-params'

const handler = () => {
  const [selected, setSelected] = React.useState([])

  const { data: sites } = swr('/sites', request)
  const { data } = swr(`/test${arrayParam('regions', selected)}`, request)

  const onChange = event => {
    if (event.target.checked) {
      setSelected(selected => [...selected, event.target.value])

      return
    }

    const index = selected.indexOf(event.target.value)

    if (index != -1) {
      const clone = [...selected]

      clone.splice(index, 1)

      setSelected(clone)
    }
  }

  return (
    <div className='h-screen grid grid-cols-5'>
      <div className='col-span-1 bg-purple-500 p-4'>
        {sites?.slice(0, 5)?.map(site => (
          <div key={site.ID}>
            <input
              id={`site-${site.ID}`}
              type='checkbox'
              value={site.ID}
              onChange={onChange}
            />
            <label
              htmlFor={`site-${site.ID}`}
            >
              {site.Name}
            </label>
          </div>
        ))}
      </div>
      <div className='col-span-3'>
        <pre>
          {JSON.stringify(selected)}
        </pre>
      </div>
    </div>
  )
}

export default handler

query-params.js

export const arrayParam = (name, arr) => {
  let query = ''

  arr.forEach((item, index) => {
    query += index === 0 ? '?' : '&'
    query += `${name}[]=${item}`
  })

  return query
}