Randomly order elements in an array Once in React (Possibly using Use effect)

I'm working on a solo project quizzical whilst learning react but cant find a solution to give the answers a random order without breaking my code. I have tried to use a shuffle function but this just causes the order of the answers to change with every click, I also tried to add the correct answer at a random index but the same problem happened. Not sure if I have to totally restructure my code or if there is a workaround. Be great if someone could take a look.

https://scrimba.com/learn/learnreact/fork-of-section-4-solo-project-coc8e46febb53e8d33018993e

As you can see all correct answers are in the last position in the answer array

I have attempted to use useEffect but really unsure if this is a situation where it should be used, this is just what i've left in my code. Removing the useEffect shuffles on every button click placing answers in the wrong places. I have included this code but may be hard to gauge the problem so scrim is attached

        const incorrectIds = [nanoid(), nanoid(), nanoid()]
        let counter = 0
            
        const correctAnswer = 
                                    <button 
                                            value='correct'
                                            id={correctId}
                                            onClick={e => {
                                                changeClass(correctId, 'correct')
                                                props.answerQuestion(e, 'correct')
                                            }}>       
                                    {props.result.correct_answer}</button>
                            
                                    
                
        let answers = props.result.incorrect_answers
        let allAnswers = answers.map(answer => {
                            const id = incorrectIds[counter]
                            counter++ 
                            return (
                            <button 
                                value='incorrect'
                                id={id}
                                onClick={e => {
                                    changeClass(correctId, 'correct')
                                    changeClass(id, 'incorrect')
                                    props.answerQuestion(e, 'incorrect')
                                }}>
                            {answer}</button>)})
                            
        allAnswers.push(correctAnswer)
       
       React.useEffect(function() {
           allAnswers = shuffle(allAnswers)
        }, [])```

1 answer

  • answered 2021-11-23 04:36 Jake Clifford

    I solved the problem by setting state of a randomly sorted array within use effect only changing when props.result changed

    const [randomArray, setRandomArray] = React.useState([])
    
    React.useEffect(function() {
    setRandomArray(shuffle(allAnswers))
    }, [props.result])
    

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum