Map array to return components with different classNames

The problem is that document.querySelector is being called in the Numbers component to get a segment, e.g.

const segmentB = document.querySelector('.segment-b');

This call will find the first DOM element on the whole page that has a class containing segment-b, which then means that the wrong number is having it's segments altered when the 2nd number is being rendered. You can verify this by inputting a double digit number where both digits are the same e.g. 66 - the first number should be rendered 6 and the 2nd number will not be correct.

Instead of using document.querySelector with classList.add and classList.remove you could instead use a dynamic variable to calculate the disabled segment classes required in each Number component that are then rendered on that specific Number component:

const Numbers = ({ singleNumber }) => {
  const switchDisabled = (element) => {
    const allSegments = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
    let disabledSegments = [];

    switch (element) {
      case 2:
        disabledSegments.push("c");
        disabledSegments.push("f");
        break;
      case 6:
        disabledSegments.push("b");
        break;
      default:
        break;
    }
  };

  return (
    <div className="container">
      {allSegments.forEach(segmentLetter => {
        const disabledClass = disabledSegments.includes(segmentLetter) ? 'segment-disabled' : '';

        return (
          <div className={`segment segment-${segmentLetter} ${disabledClass}`} />
        )
      })}
    </div>
  );
};

P.S. in general you want to 99.99% of the time calling document.querySelector in react due to these kinds of problems

The react way is to not manipulate the dom by calling on a dom node but building the dom nodes. So instead of adding the classes by calling on the dom node just build the dom node with the classes already in place.

In your app component you can just set the input as a string and then split it and loop through it placing a number component for each one. In your number component you can just set the segements that you want in an array and map through them placing the classNames that you want when the component renders.

Here is a codesandbox example led display codesandbox

App.js

import { useState } from "react";
import Number from "./Number";

function App() {
  const [input, setInput] = useState("0");

  return (
    <>
      <input
        onChange={(e) => {
          setInput(e.target.value);
        }}
      />
      {input.split("").map((number, i) => (
        <Number key={i} number={number} />
      ))}
    </>
  );
}

export default App;

Number.js

const Number = ({ number }) => {
  let segments = [];

  switch (number) {
    case "1":
      segments = ["b", "c"];
      break;
    case "2":
      segments = ["a", "b", "d", "e", "g"];
      break;
    case "3":
      segments = ["a", "b", "c", "d", "g"];
      break;
    case "4":
      segments = ["b", "c", "f", "g"];
      break;
    case "5":
      segments = ["a", "c", "d", "f", "g"];
      break;
    case "6":
      segments = ["a", "c", "d", "f", "e", "g"];
      break;
    case "7":
      segments = ["a", "b", "c"];
      break;
    case "8":
      segments = ["a", "b", "c", "d", "e", "f", "g"];
      break;
    case "9":
      segments = ["a", "b", "c", "d", "f", "g"];
      break;
    case "0":
      segments = ["a", "b", "c", "d", "e", "f"];
      break;
    default:
      segments = ["a", "b", "c", "d", "e", "f"];
  }

  return (
    <div className="container">
      {segments.map((segment) => (
        <div key={segment} className={`segment segment-${segment}`}></div>
      ))}
    </div>
  );
};

export default Number;