DEV Community

Discussion on: I need help. TypeError: Cannot read properties of undefined (reading 'current')

View post
Collapse
 
joelbonetr profile image
JoelBonetR 🥇 •

Add a console log like that:

function QuizLogic(showScore, totalTime, fetchQuestions, loading, currentQuestion, questions, handleAnswerOptionClick, countDownBarWith) {
  const router = useRouter();

  console.log('loading', loading); // You'll see what's the content of loading
Enter fullscreen mode Exit fullscreen mode

I would say (without having take a look at the rest of the code) that loading is something set in runtime in a different place (maybe a state) so instead adding the if before, you can do

    return (
      {loading && loading.current && showScore && <button
        onClick={() => router.push('/SaveComponent')}
        type="button"
      >
        See score
      </button>
    });
Enter fullscreen mode Exit fullscreen mode

This way it will check that loading is not undefined neither null before checking loading.current.

You may also add default values for props:

function QuizLogic(showScore, totalTime, fetchQuestions, loading = null, currentQuestion, questions, handleAnswerOptionClick, countDownBarWith) {
Enter fullscreen mode Exit fullscreen mode

I've added it just in loading but I recommend to do that on each of them. You can either use this approach, or using prop-types or both combined.

Last but not least, you may want to split your logic into different functions to keep it SOLID and KISS. 😁