Custom result rendering error

[Samorinho]

Hello, I have an issue, when rendering the result, the explanations don't appear. I even tried with the original example, the results appear but I can't see the explanations. Below is an exemple of how I'm rendering the component. If I add showDefaultResult={false} and customResultPage={renderCustomResultPage} then there is no render at all.

Also, when I add a console.log(obj) in the const renderCustomResultPage = (obj) => {}, the results are duplicated in the console.

Quiz : <Quiz className={myClass} quiz={myQuiz} shuffle={true} showDefaultResult={false} customResultPage={renderCustomResultPage} />

Any help would be welcome. Thank you

[wingkwong]

@Samorinho May I know which version you're using? For the second issue you mentioned, are you using StrictMode?

[Samorinho]

Hello @wingkwong, the version is 0.3.7 and I'm not using StrictMode at the moment, but I just tried in StrictMode and the same thing is happening

[wingkwong]

import React, { useState, useEffect } from "react";
import { render } from "react-dom";
import Quiz from "../lib/Quiz";
import { quiz } from './quiz';

function App() {
  const [quizResult, setQuizResult] = useState();

  useEffect(() => {
      if(quizResult) {
          console.log('quizResult', quizResult);
      }
  }, [quizResult]);

  return (
    <>
      <Quiz
        quiz={quiz}
        shuffle={true}
      />
    </>
  );
}

render(<App />, document.getElementById("app"));

I can see the explanation.

With the config you provided,

import React, { useState, useEffect } from "react";
import { render } from "react-dom";
import Quiz from "../lib/Quiz";
import { quiz } from './quiz';

function App() {
  const [quizResult, setQuizResult] = useState();

  useEffect(() => {
      if(quizResult) {
          console.log('quizResult', quizResult);
      }
  }, [quizResult]);

  const renderCustomResultPage = (obj) => {
    console.log(obj);
    return (
      <div>
        This is a custom result page. You can use obj to render your custom result page
      </div>
    )
  }

  return (
    <>
      <Quiz
        quiz={quiz}
        shuffle={true}
        showDefaultResult={false}
        customResultPage={renderCustomResultPage}
      />
    </>
  );
}

render(<App />, document.getElementById("app"));

The custom page can be rendered.

[osseonews]

Same issue here. Using the exact code above, but when replacing the import with import Quiz from 'react-quiz-component'; the custom result page does not return anything and console.log(obj) in the const renderCustomResultPage = (obj) => {}, the results are duplicated in the console.

BTW, using version: ^0.3.7

[osseonews]

the only way we were able to resolve the duplicated 'obj' in the console, was to do an if, like below, as the first render of the object, is always wrong, and always returns a totalPoints of 0.

if (obj.totalPoints > 0) {
       //DO Code Here
    }

[wingkwong]

@osseonews Thanks. I'll take a look later.

[wingkwong]

@osseonews can you try to use v0.3.8 to see if it resolves custom result page issue? I think I've published the wrong version to npm.

[osseonews]

Yes, updating to 0.3.8 resolved the custom result page. Can you update the master to it uses that package? Thanks.

[Samorinho]

I confirm, problem fixed with updating to 0.3.8