How can I prevent changing sequence of options in my quiz app in react?

Question

I am trying to make a quiz app in react. I get data from firebase. I wrote code block in jsx for bringing together right option and wrong options, also shuffling options. But when I click an option the sequence of options change immediately. The sequence changes over and over every time I click it. I tried preventDefault and React.memo but I couldn't fix it. This is my code block in function component

function ExercisePage() {
    const [exercises, setExercises] = useState([])
    const [current, setCurrent] = useState(0)
    const [userAnswers, setUserAnswers] = useState([])
    const length = exercises.length
    let topicName = useLocation()
    let newTopicName = topicName.state.state
    const navigate = useNavigate()

    const nextSlide = (e) => {
        e.preventDefault()
        setCurrent(current === length - 1 ? 0 : current + 1)

    }
    const prevSlide = (e) => {
        e.preventDefault()
        setCurrent(current === 0 ? length - 1 : current - 1)
    }

    useEffect(() => {
        onSnapshot(collection(db, 'exercises-data-' + topicName.state.state), snapshot =>
            setExercises(
                snapshot.docs.map(doc => ({
                    id: doc.id,
                    data: doc.data()
                }))
            )
        )
    }, [])
    const handleClickAnswer = (e, index) => {        
        userAnswers[index] = e.target.textContent
        setUserAnswers([...userAnswers])
    }
    const finishExam = () => {

        let answer = window.confirm('are you sure?')
        if (answer) {
            navigate('/finalscore', { state: { userAnswers, newTopicName } })
        }
    }
    return (
        <div className='slideBody'>

            <div className='mainSlide'>
                <FaArrowAltCircleLeft className='left-arrow' onClick={(e) => prevSlide(e)} />
                <FaArrowAltCircleRight className='right-arrow' onClick={(e) => nextSlide(e)} />
                {
                    exercises.map(({ id, data }, index) => (
                        <div className={index === current ? 'data active' : 'data'} key={id}>
                            {
                                index === current &&
                                <div className='slide' >
                                    <div className='dataHead'><div>{data.head}</div> <div>soru {index + 1}</div></div>
                                    <div className='dataImage'><img src={data.image}></img></div>
                                    <div className='dataQue'>{data.question}</div>
                                    <div>
                                        {
                                            (data.rightOption + ',' + data.wrongOptions).split(',').sort(()=>0.5-Math.random()).map((option) =>
                                                (
                                                    <div
                                                        key={id}
                                                        className='options'
                                                        id={option}
                                                        onClick={(e) => handleClickAnswer(e, index)}
                                                    >
                                                        {option}                                                       
                                                    </div>
                                                    
                                                ))                                                                                      
                                        }
                                        
                                    </div>
                                </div>}
                        </div>
                    ))
                }
            </div>
            <div className='finishExamContainer'>
                <button className='finishExam' onClick={finishExam}>Finish Exam</button>
            </div>

        </div>
    )
}
export default ExercisePage;

I want to prevent changing sequence of options when I click any option. How can I fix this?

Answer 1

You can fix this by randomizing your options in useEffect and pass exercises as dependency.

useEffect(()=> {
  onSnapshot(collection(db, 'exercises-data-' + topicName.state.state), snapshot => 
    setExercises(
      snapshot.docs.map(doc => {
        const arr = doc.data();
        const data = arr.map(
          ({ id, data }, index) => { 
            data.options = (data.rightOption + ',' + data.wrongOptions).split(',').sort(()=>0.5-Math.random());
            return data;
        });
        return {
          id: doc.id,
          data,
        }
      })
    )
}, [])

and

    return (
  <div className='slideBody'>

      <div className='mainSlide'>
          <FaArrowAltCircleLeft className='left-arrow' onClick={(e) => prevSlide(e)} />
          <FaArrowAltCircleRight className='right-arrow' onClick={(e) => nextSlide(e)} />
          {
              exercises.map(({ id, data }, index) => (
                  <div className={index === current ? 'data active' : 'data'} key={id}>
                      {
                          index === current &&
                          <div className='slide' >
                              <div className='dataHead'><div>{data.head}</div> <div>soru {index + 1}</div></div>
                              <div className='dataImage'><img src={data.image}></img></div>
                              <div className='dataQue'>{data.question}</div>
                              <div>
                                  {
                                      (data.options.map((option) =>
                                          (
                                              <div
                                                  key={id}
                                                  className='options'
                                                  id={option}
                                                  onClick={(e) => handleClickAnswer(e, index)}
                                              >
                                                  {option}                                                       
                                              </div>
                                              
                                          ))                                                                                      
                                  }
                                  
                              </div>
                          </div>}
                  </div>
              ))
          }
      </div>
      <div className='finishExamContainer'>
          <button className='finishExam' onClick={finishExam}>Finish Exam</button>
      </div>

  </div>
)