React white screen of death, why does commenting out this code fix it?

Question

I'm making a simple react app to take trivia questions and answers from an api and display them as a game.

My development of this app has been running smoothly and updating as per expected, however when I imported a decode function to make the trivia questions present correctly, I noticed that further edits of the code would result in a blank white screen, after commenting out some code I've managed to isolate what code seems to be causing the issue.

App.js

import React from 'react'
import Questions from './Questions'
import { nanoid } from 'nanoid'
import { decode } from 'he'

function App() {
  const [tempState, setTempState] = React.useState(false)
  const [data, setData] = React.useState({})

  React.useEffect(() => {
    fetch("https://opentdb.com/api.php?amount=5&category=9&difficulty=medium")
      .then(res => res.json())
      .then(info => setData(info.results.map(item => {
        return { 
          type: item.type, 
          question: item.question, 
          correct_answer: item.correct_answer, 
          incorrect_answers: item.incorrect_answers,
          id: nanoid() 
        }})))
  }, [])

  const questionElements = data.map(item => (
    <Questions 
      key={item.id}
      type={item.type}
      question={item.question}
      correct_answer={item.correct_answer}
      incorrect_answers={item.incorrect_answers}
    />
  ))
  
  return (
    <main>
      <img className="blob--top"
        src={require('./blobs.png')}
      />

      <img className="blob--bottom"
        src={require('./blobs1.png')}
      />

      {tempState ?
        <div className="quiz--container">
          <div>
             {questionElements}
          </div>
        </div> :
        <>
          <div className="title--container">
            <div className="title--init">
              <h2 className="title--header">Quizzical</h2>
              <h4 className="title--subheader">A battle of the brains</h4>
              <button className="game--start"
                onClick={() => setTempState(!tempState)}
              >
                Start quiz</button>
            </div>
          </div>
        </>
      }
    </main>
  );
}

export default App;

Questions.js

import React from 'react'
import { decode } from 'he'

export default function Questions(props) {
    return(
        <div className="question--container">
            <h4>{decode(props.question)}</h4>
            <div className="question--items">
                <button>{decode(props.correct_answer)}</button>
                <button>{decode(props.incorrect_answers[0])}</button>
                <button>{decode(props.incorrect_answers[1])}</button>
                <button>{decode(props.incorrect_answers[2])}</button>
            </div>
        </div>
    )
}

commenting out the following two code sections in App.js resolves the error

const questionElements = data.map(item => (
   <Questions 
      key={item.id}
      type={item.type}
      question={item.question}
      correct_answer={item.correct_answer}
      incorrect_answers={item.incorrect_answers}
   />
))

<div>
   {questionElements}
</div>

any ideas on what I'm doing wrong? no error messages show up in react, it just shows a blank white screen.

Answer 1

The blank white screen is caused by the error data.map is not a function , which is caused by your setting default value of the data state to be an empty object while it should be an empty array (so that you can map through).

To fix this error, simply set the default value of data to be an empty array.

const [data, setData] = React.useState([])

Code Sandbox: https://codesandbox.io/embed/inspiring-rhodes-gp5kki?fontsize=14&hidenavigation=1&theme=dark