please help.
i still confuse why i got delay when update the button color when i click the colors.
if i see the console.log when i click the button, it has no delay, but when it update to colors, it got delayed.
let me show you the code,
here is the code for button :
{kuis.question[index].answer.map((a, i) => (
<button
onClick={() => selectAnswer(a)}
className={
"flex items-center px-6 py-3 mb-1 border-[1px] rounded-lg gap-5 " +
(a.id ==
quiz.question[index].user_answer
.quiz_question_answer_id &&
"bg-green-400")
}
>
<span className="w-[30px] h-[30px] rounded-md bg-black text-white text-sm text-center items-center flex justify-center">
{i == 0
? "A"
: i == 1
? "B"
: i == 2
? "C"
: i == 3
? "D"
: "E"}
</span>
{a.description}
</button>
))}
so, i create a looping for create the answer choice, it will looping for create 5 options button.
and for the selectAnswer function, i use this :
function selectAnswer(e) {
let k = kuis;
k.question[index].user_answer.quiz_question_answer_id = e.id;
console.log(e.id);
setKuis(k);
axios.post("/api/select_answer", {
id: k.question[index].user_answer.id,
quiz_question_answer_id: e.id,
});
}
but it has delay for the button to change the colors to green when it get selected.
please help, i need your help.