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

I need help.

TypeError: Cannot read properties of undefined (reading 'current').

This is code ⬇️⬇️

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


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

https://github.com/dragoslavIvkovic/Test-your-JS-skills---NEXT.JS-REDUX-MONGODB/blob/main/components/QuizLogic.js

Comments

[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

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>
    });

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) {

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. 😁

[Makar Murashov]

Prop loading that you're passing to your component is undefined somehow, I believe it is a ref for something, please check if you really initialized it correctly. It might be undefined on initial load somehow.
Other thing - you could add the Optional Chaining operator there to prevent this error:

if (loading?.current && showScore) {}

[Deon Rich]

loading is undefined. Also, not sure if this is the best place to post questions.