`import React from 'react'

export default function Quiz(props){


    // generate random index without duplicates
    function generateRandomIndex(){
        const randomNumArr=[]

        for (var a = [0, 1, 2, 3], i = a.length; i--; ) {
            var random = a.splice(Math.floor(Math.random() * (i   1)), 1)[0];
            randomNumArr.push(random)
        }
        return randomNumArr
    }

    let randomNumbers = generateRandomIndex()

    let spreadOptions = ()=>{

        let optionsHtmlArray = []
            for(let i=0; i<props.answers.length; i  ){
                optionsHtmlArray.push(`<span className='answers' key=${i} style={${{backgroundColor: props.correct===props.answers[i] ? "green" : "red"}}}>
                { ${props.answers[i]} } </span>`)


            }
            return optionsHtmlArray
        }


    return (
    
      <div className='Quiz'>
        <h3 className='question'>{props.question}</h3>

        <div className='answers_div'>
         { spreadOptions()[randomNumbers[0]] }
         { spreadOptions()[randomNumbers[1]] }
         { spreadOptions()[randomNumbers[2]] }
         { spreadOptions()[randomNumbers[3]] }
        </div>
        <hr className='hr'/>
      </div>)

}

'

 '//this is from App.js
// fetch to API when first render to save data to the state, 
  // and fetch depending on the sate of showOverlay
  React.useEffect(() => {

    fetch("https://opentdb.com/api.php?amount=5&category=9&difficulty=easy&type=multiple")
        .then(res => res.json())
        .then(data => {
          setQuestions(data.results)
          //after set questions state that comes from fetch request
          //and set the custom questions with some properties I need
          setCustomQuestions(prevQuestions=>{
            let newArr=[]
            for(let i=0; i<data.results.length; i  ){
              newArr.push({question: data.results[i].question, 
                           questionId: nanoId(),
                           answers: [data.results[i].correct_answer].concat(data.results[i].incorrect_answers),
                           correct: data.results[i].correct_answer})
            }
 
            return newArr
          })
          
        })
}, [])

  // Quiz component properties
  const customQuestionsArr = customQuestions.map(question => {
    return < Quiz
      key={question.questionId}
      question={question.question}
      answers={question.answers}
      correct={question.correct}
   />

  })'

Hi all, I am trying to render all options of the answers in Quiz component, however,
spreadOptions() returns an array of html strings for the answers I gotta parse to JSX to make it work.

1. I tried to install react-html-parser, didn't work it only gave me a bunch of error every time when I try to install dependencies through npm
2. I tried dangerouslySetInnerHTML, but also didn't work

CodePudding user response：

Would you be able to provide the props that you are trying to pass to Quiz component?

Below is a snippet of code with modified spreadOptions and jsx return. I wasn't able test this code tho. But will update it if you can provide a sample props.

let spreadOptions = props.answers.map((a, i) => (
  <span 
    key={i}
    className='answers' 
    style={{ 
      backgroundColor: props.correct === a ? 'green' : 'red',
    }}
    >
      {a}
  </span>
));

return (
  <div className="Quiz">
    <h3 className="question">{props.question}</h3>

    <div className="answers_div">
      {spreadOptions}
    </div>
    <hr className="hr" />
  </div>
);