title: How to recursively build an answers object in React?
body: <p>I built a QuestionsTree component that displays a question, and then according to the answer displays another question and so on.
  The component works correctly in displaying the questions, but I'd like to recursively build the answers object as well.</p>
  
  <p>The component code is :</p>
  
  <pre><code>import React from 'react';
  import {useState} from 'react';
  import Question from "./Question";
  
  
  const QuestionTree = (props) =&gt; {
      const {questionnaire, answersCb} = props;
      const [moreQuestions, setMoreQuestions] = useState(null);
      const handleAnswer = (answer)=&gt;{
          console.log('answer: ', answer);
          answersCb(answer);
          const option = questionnaire.options.find(option=&gt; option.value === answer[questionnaire.id]);
          if (option &amp;&amp; option.question) {
              setMoreQuestions(
                  &lt;QuestionTree
                      questionnaire={option.question}
                      answersCb={answersCb}
              /&gt;);
          };
      };
  
  
      return (
          &lt;div&gt;
              &lt;Question
                  answerReceived={handleAnswer}
                  question={questionnaire.question}
                  questionId={questionnaire.id}
                  options={questionnaire.options}
              /&gt;
              {moreQuestions}
          &lt;/div&gt;
      );
  };
  
  export default QuestionTree;
  </code></pre>
  
  <p>Here is a link to my repo with the entire project :
  <a href="https://bitbucket.org/rugggger/react-components/src/master/src/components/" rel="nofollow noreferrer">https://bitbucket.org/rugggger/react-components/src/master/src/components/</a></p>
  
  <p>Currently the answersCb returns only the clicked on answer - </p>
  
  <pre><code>{ 
   "question-1": 1
   }
  </code></pre>
  
  <p>How do I write the 'answersCb' function to return me the current state of all the answers the users chose ? 
  Something like: </p>
  
  <pre><code>{
  "question-1": 1,
  "question-3": 4,
  "question-5": 3
  }
  </code></pre>