反应如何在不对输入做任何事情的情况下更改输入 css

Question

我已从我所做的调查中获取答案，我想显示结果。
这是一个符号（1 到 5），我想像截图一样显示结果。
数字是正方形，答案是另一种颜色。
但我被困住了。
如何将获取的注释与输入的值进行比较？
我没有做 onChange 所以我不能使用 event.target.value。

我想要类似的东西：

className={`square ${element.answer===value && "red"}`}

我的代码：

import React, { useEffect, useState } from "react";
import "./index.css";
import axios from "axios";

/* import icons */
import FileWhite from "../../assets/img/file-text-white.svg";
import StarWhite from "../../assets/img/star-white.svg";
import Minus from "../../assets/img/minus.svg";

const Responses = ({ id }) => {
  const [data, setData] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  useEffect(() => {
    if (id) {
      const fetchData = async () => {
        try {
          const response = await axios.get(
            `http://localhost:3001/responses/${id}`
          );
          console.log(response.data);
          setData(response.data);
          setIsLoading(false);
        } catch (error) {
          console.log(error.message);
        }
      };
      fetchData();
    }
  }, [id]);

  return isLoading ? (
    <div>Chargement en cours...</div>
  ) : (
    <div id="responses">
      {data.map((responses) => {
        return responses.answers.map((element) => {
          return (
            <article>
              <div className="question">
                <div
                  className={`type ${
                    element.type === "texte" ? "orange" : "red"
                  }`}
                >
                  <span>{element.type === "texte" ? "1" : "2"}</span>
                  <img src={Minus} alt="" />
                  <img
                    src={element.type === "texte" ? FileWhite : StarWhite}
                    alt=""
                  />
                </div>
                <div>{element.question}</div>
              </div>
              {element.type === "texte" ? (
                <div className="answerText">{element.answer}</div>
              ) : (
                <div className="answerNote">
                  <div className="square">
                    <input type="radio" id="note1" name="note" value="1" />
                    <label htmlFor="note1">1</label>
                  </div>

                  <div className="square">
                    <input type="radio" id="note2" name="note" value="2" />
                    <label htmlFor="note2">2</label>
                  </div>

                  <div className="square">
                    <input type="radio" id="note3" name="note" value="3" />
                    <label htmlFor="note3">3</label>
                  </div>

                  <div className="square">
                    <input type="radio" id="note4" name="note" value="4" />
                    <label htmlFor="note4">4</label>
                  </div>

                  <div className="square">
                    <input type="radio" id="note5" name="note" value="5" />
                    <label htmlFor="note5">5</label>
                  </div>
                </div>
              )}
            </article>
          );
        });
      })}
    </div>
  );
};

export default Responses;

我如何获得输入的值来得到这个结果？ （见截图）

Answer 1

应该是这样的

className={`square ${element.answer===value ? "red" : "" }`}