How can I use the useState hook to ensure unique key-value pairs in React

1. Initialize the State:
Initialize the state with an empty object. This will allow you to store key-value pairs in the state.

2. Use the `useState` Hook:
Use the `useState` hook to set the initial state and update it when necessary.

3. Check for Existing Keys:
Before adding a new key-value pair, check if the key already exists in the state. If it does, update the value for that key.

4. Add New Key-Value Pair:
If the key does not exist, add the new key-value pair to the state.

5. Handle Updates:
When updating a key-value pair, ensure that you update the existing key if it already exists.

6. Handle Deletions:
When deleting a key-value pair, ensure that you remove the key from the state.

Here is an example of how you can implement this:

javascript
import React, { useState } from 'react';

function Example() {
  const [keyValuePairs, setKeyValuePairs] = useState({});

  const handleKeyValuePairChange = (key, value) => {
    if (Object.keys(keyValuePairs).includes(key)) {
      setKeyValuePairs({
        ...keyValuePairs,
        [key]: value
      });
    } else {
      setKeyValuePairs({
        ...keyValuePairs,
        [key]: value
      });
    }
  };

  const handleKeyValuePairDelete = (key) => {
    setKeyValuePairs(Object.keys(keyValuePairs).reduce((acc, currentKey) => {
      if (currentKey !== key) {
        acc[currentKey] = keyValuePairs[currentKey];
      }
      return acc;
    }, {}));
  };

  return (
    <div>
      <h2>Key-Value Pairs</h2>
      <ul>
        {Object.keys(keyValuePairs).map((key, index) => (
          <li key={index}>
            {key}: {keyValuePairs[key]}
            <button onClick={() => handleKeyValuePairDelete(key)}>Delete</button>
          </li>
        ))}
      </ul>
      <form>
        <label>
          Key:
          <input type="text" name="key" />
        </label>
        <label>
          Value:
          <input type="text" name="value" />
        </label>
        <button onClick={(event) => handleKeyValuePairChange(event.target.key.value, event.target.value)}>Add</button>
      </form>
    </div>
  );
}

export default Example;

This example demonstrates how to manage key-value pairs in React using the `useState` hook. It includes functions to add and delete key-value pairs, ensuring that keys are unique and values are updated correctly.