Docs
Map

Map

Synchronize and update state based on the Map data structure

About

The useMap hook provides a wrapper around the JavaScript Map object, allowing easy updates and synchronization of the map state with the component’s rendering. By using this hook, you can add, delete, or clear entries in the map, ensuring the component re-renders whenever these operations are performed.

Return Values

NameTypeDescription
mapmap objectAn instance of the Map object with enhanced methods.

Installation

Run the following command:

npx scriptkavi-hooks@latest add map

Usage

import { useMap } from "@/hooks/map"
import * as React from "react"
 
export default function App() {
  const map = useMap([
    ["Jazz", 32],
    ["Suns", 50],
  ])
 
  return (
    <section>
      <h1>useMap</h1>
      <table>
        <thead>
          <tr>
            <th colSpan={4}>Jazz vs Suns</th>
          </tr>
        </thead>
        <tbody>
          {Array.from(map.keys()).map((team) => {
            const score = map.get(team)
            return (
              <tr key={team}>
                <th style={{ width: "25%" }}>{team}</th>
                <td style={{ width: "50%" }}>{score}</td>
                <td style={{ width: "12.5%" }}>
                  <button
                    className="link"
                    onClick={() => {
                      map.set(team, score + 2)
                    }}
                  >
                    + 2
                  </button>
                </td>
                <td style={{ width: "12.5%" }}>
                  <button
                    className="link"
                    onClick={() => {
                      map.set(team, score + 3)
                    }}
                  >
                    + 3
                  </button>
                </td>
              </tr>
            )
          })}
        </tbody>
      </table>
    </section>
  )
}
Long PressMeasure