Q122- Build a React component for a real-time character frequency counter.

real-time character frequency counter:

import React, { useState } from "react";

function CharFrequencyCounter() {
  const [text, setText] = useState("");
  const [frequency, setFrequency] = useState({});

  const handleChange = (e) => {
    const input = e.target.value;
    setText(input);

    // Calculate character frequency
    const freq = {};
    for (let char of input) {
      freq[char] = (freq[char] || 0) + 1;
    }
    setFrequency(freq);
  };

  return (
    <div style={{ padding: "20px", maxWidth: "400px", fontFamily: "Arial" }}>
      <h2>Character Frequency Counter</h2>
      <input
        type="text"
        value={text}
        onChange={handleChange}
        placeholder="Type here..."
        style={{ width: "100%", padding: "8px", fontSize: "16px" }}
      />

      {text && (
        <div style={{ marginTop: "20px" }}>
          <h3>Character Frequencies:</h3>
          <ul>
            {Object.entries(frequency).map(([char, count]) => (
              <li key={char}>
                '{char}': {count}
              </li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
}

export default CharFrequencyCounter;

---

How It Works

1. Input Field:
   • value is bound to text state
   • onChange updates text and calculates character frequency
2. Frequency Calculation:
   • Loop through each character in the input string
   • Increment its count in an object (freq)
   • Update frequency state
3. Rendering:
   • Convert frequency object into [char, count] array using Object.entries
   • Render each pair as a list item

---

✅ Features

• Updates on every keystroke
• Shows a live count of each character
• Works with any input string
• Clean, reusable, and minimal UI