I have collected responses from a survey I created and now I want to showcase the results.
The responses are rated on a scale from 1 to 5, and I would like to display them similar to the screenshot.
Each number should be presented within a square, with the selected response highlighted in a different color.
However, I am facing a challenge.
How can I compare the fetched rating with the value of my input?
Since I am not using onChange, I cannot rely on event.target.value.
I wish to achieve something like this:
className={`square ${element.answer===value && "red"}`}
Below is an excerpt of my code:
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>Loading...</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;
How can I extract the input value to achieve the desired output? (refer to screenshot) https://i.sstatic.net/6RYxE.png