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

我已从我所做的调查中获取了一份调查结果，我想显示结果。
它是一个表示法（1到5），我想像screeshot一样显示结果
数字在一个正方形中，答案的数字是另一种颜色。
但是我被卡住了。
如何将我获取的便笺与输入的值进行比较？
我没有进行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;

import React，{useffect，useState}来自“React”；
导入“/index.css”；
从“axios”导入axios；
/*导入图标*/
从“../../assets/img/file text white.svg”导入FileWhite；
从“../../assets/img/star-white.svg”导入StarWhite；
从“../../assets/img/Minus.svg”导入减号；
常量响应=（{id}）=>{
const[data，setData]=useState（[]）；
const[isLoading，setIsLoading]=useState（true）；
useffect（（）=>{
如果（id）{
const fetchData=async（）=>{
试一试{
const response=等待axios.get(
`http://localhost:3001/responses/${id}`
);
console.log（response.data）；
setData（response.data）；
设置加载（假）；
}捕获（错误）{
console.log（错误消息）；
}
};
fetchData（）；
}
}，[id]）；
返回卸载(
收费过程中。。。
) : (
{data.map（（响应）=>{
返回responses.answers.map（（元素）=>{
返回(
应该是这样的

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

我试过了，但出现了一个错误“值未定义”…类名不在输入中，而是在上面包含输入的div中。我尝试了输入，同样的错误。请检查您是否将数据获取到
元素。回答
或
值
我已经获取了元素的数据。回答，但正如我所说，我使用输入显示元素的结果。回答，所以我不对输入做任何操作。这这就是为什么我不知道如何更改css。在不同的输入上，我只有value=1、value=2等等。我将编辑并发布我的代码。这就是您对第4项的要求？``您可以避免重复
1
只需使用数组映射即可。。