Stats can be created with map in word-analytics

[Rope-a-dope]

Container.tsx

import { useState } from "react";
import Stats from "./Stats";
import Textarea from "./Textarea";
import {
  FACEBOOK_MAX_CHARACTERS,
  INSTAGRAM_MAX_CHARACTERS,
} from "../lib/constants";

export default function Container() {
  const [text, setText] = useState("");
  const stats = [
    { label: "Characters", number: text.length },
    {
      label: "Words",
      number: text.split(/\s/).filter((word) => word !== "").length,
    },
    {
      label: "Instagram",
      number: INSTAGRAM_MAX_CHARACTERS - text.length,
    },
    {
      label: "Facebook",
      number: FACEBOOK_MAX_CHARACTERS - text.length,
    },
  ];

  return (
    <main className="container">
      <Textarea text={text} setText={setText} />
      <Stats stats={stats} />
    </main>
  );
}

Stats.tsx

export default function Stats({ stats }) {
  return (
    <section className="stats">
      {stats.map((element) => (
        <Stat
          key={element.label}
          number={element.number}
          label={element.label}
        />
      ))}
    </section>
  );
}

function Stat({ number, label }) {
  return (
    <section className="stat">
      <span className={`stat__number ${number < 0 && "stat__number--limit"}`}>
        {number}
      </span>
      <h2 className="second-heading">{label}</h2>
    </section>
  );
}