title: Pass answers from child component to parent component to add to cart
body: <p>I've spent a few days going back and forth now trying to figure this one out but I'm unable to.</p>
  <p>First off it's easiest to describe the end goal.</p>
  <ol>
  <li>In SectionQuestions component there is an add to cart button, on click it should send an object of data to the cartItems state.</li>
  <li>The SectionQuestions component gets its data from the QuestionsList component.</li>
  <li>The QuestionsList component gets it's answers from the 2 different input components</li>
  </ol>
  <p>The issues I am facing:</p>
  <ol>
  <li>The questions are dynamically pulled from WordPress so the code must be dynamic as questions cant be hardcoded.</li>
  <li>There are multiple questions depending on what service is selected.</li>
  <li>When using a radio button the value was added to an object twice instead of overwriting the previous value.</li>
  <li>I am using ChakraUI where I don't believe you can expand on their onChange value for RadioGroups so I am unable to run code as a handler instead must use the useEffect hook</li>
  </ol>
  <p>What I Think the solution is</p>
  <p>I believe that each input should pass its answer up to the parent component.
  I believe the QuestionsList component should store the answer and know where the answer came from. (This is less of a challenge for the text/number field and more so an issue for radio buttons)</p>
  <p>Let's get into some code... I apologise in advance there's a lot for the purpose of length I will display only the required sections of each file:</p>
  <p>SectionQuestions.js</p>
  <pre><code>allWpService.nodes.map(service =&gt; {
      return (
      &lt;div key={service.id}&gt;
          {selected === service.id ? (
          &lt;div&gt;
              &lt;p&gt;{service.title}&lt;/p&gt;
              &lt;QuestionList service={service} /&gt;
          &lt;/div&gt;
          ) : null}
      &lt;/div&gt;
      )
  })
  </code></pre>
  <p>QuestionList.js</p>
  <pre><code>import React, { useState } from &quot;react&quot;
  import InputRadioButton from &quot;../InputFields/InputRadioButton&quot;
  import InputTextNumber from &quot;../InputFields/InputTextNumber&quot;
  
  const QuestionList = ({ service }) =&gt; {
  const [answers, setAnswers] = useState([])
  
  const setAnswersValue = index =&gt; {
      setAnswers(answers.push(index))
      console.log(answers)
  }
  
  return (
      &lt;&gt;
      {service.serviceQuestions.questions.map(questions =&gt; {
          return (
          &lt;div key={questions.questionTitle}&gt;
              &lt;p&gt;{questions.questionTitle}&lt;/p&gt;
              {questions.questionInputField.map(fields =&gt; {
              if (
                  fields.inputType === &quot;number&quot; ||
                  fields.inputType === &quot;text&quot;
              ) {
                  return (
                  &lt;InputTextNumber
                      fieldData={fields}
                      setAnswersValue={setAnswersValue}
                  /&gt;
                  )
              } else if (fields.inputType === &quot;radio&quot;) {
                  return (
                  &lt;InputRadioButton
                      fieldData={fields}
                      columns={questions.enableColumnLayout}
                      setAnswersValue={setAnswersValue}
                  /&gt;
                  )
              } else {
                  return &lt;p&gt;Failed to get Input Type&lt;/p&gt;
              }
              })}
          &lt;/div&gt;
          )
      })}
      &lt;/&gt;
  )
  }
  
  export default QuestionList
  </code></pre>
  <p>InputTextNumber.js</p>
  <pre><code>//This Input field is a number field
  import React from &quot;react&quot;
  import {
    NumberInput,
    NumberInputField,
    NumberInputStepper,
    NumberIncrementStepper,
    NumberDecrementStepper,
  } from &quot;@chakra-ui/react&quot;
  import { useState } from &quot;react&quot;
  
  const InputTextNumber = ({ fieldData, questionsAnswers }) =&gt; {
    const [value, setValue] = useState(0)
  
    return (
      &lt;NumberInput
        size=&quot;lg&quot;
        defaultValue={0}
        onChange={valueString =&gt; {
          setValue(valueString)
          questionsAnswers(valueString)
        }}
        value={value}
      &gt;
        &lt;NumberInputField /&gt;
        {fieldData.inputType === &quot;number&quot; ? (
          &lt;NumberInputStepper&gt;
            &lt;NumberIncrementStepper /&gt;
            &lt;NumberDecrementStepper /&gt;
          &lt;/NumberInputStepper&gt;
        ) : null}
      &lt;/NumberInput&gt;
    )
  }
  
  export default InputTextNumber
  </code></pre>
  <p>InputRadioButton.js</p>
  <pre><code>import React, { useEffect } from &quot;react&quot;
  import &quot;../../css/InputRadioButton.css&quot;
  import { Radio, RadioGroup } from &quot;@chakra-ui/react&quot;
  
  const InputRadioButton = props =&gt; {
    const [value, setValue] = React.useState(&quot;&quot;)
    const radios = props.fieldData.radioButtons
    const questionId = &quot;12342341&quot;
  
    function setValueProps(id, value) {
      const obj = {}
      obj[id] = { value: value }
      props.setAnswersValue(obj)
    }
  
    useEffect(() =&gt; {
      setValueProps(questionId, value)
    }, [value])
  
    return (
      &lt;RadioGroup onChange={setValue} value={value}&gt;
        &lt;div
          className={
            props.fieldData.columns === true ? &quot;flex-row&quot; : &quot;flex-column&quot;
          }
        &gt;
          {radios.map(radio =&gt; {
            return (
              &lt;div
                className={`radio-container ${
                  value === radio.inputLabel ? &quot;active&quot; : &quot;&quot;
                }`}
                key={radio.inputLabel}
              &gt;
                &lt;div className=&quot;radio-wrapper&quot; id={radio.inputImagePosition}&gt;
                  {radio.inputImage &amp;&amp; radio.inputImagePosition !== &quot;no-image&quot; ? (
                    &lt;div className=&quot;image-wrapper&quot;&gt;
                      &lt;img
                        src={radio.inputImage.sourceUrl}
                        alt={radio.inputLabel}
                      /&gt;
                    &lt;/div&gt;
                  ) : null}
  
                  {radio.inputImagePosition === &quot;no-image&quot; ? (
                    &lt;div className=&quot;radio-button-wrapper&quot;&gt;
                      &lt;Radio
                        value={radio.inputLabel}
                        name={radio.inputLabel}
                        size=&quot;lg&quot;
                        colorScheme=&quot;green&quot;
                      /&gt;
                    &lt;/div&gt;
                  ) : null}
  
                  &lt;div className=&quot;radio-content&quot;&gt;
                    {radio.inputImagePosition === &quot;image-top&quot; ? (
                      &lt;div className=&quot;radio-button-wrapper&quot;&gt;
                        &lt;Radio
                          value={radio.inputLabel}
                          name={radio.inputLabel}
                          size=&quot;lg&quot;
                          colorScheme=&quot;green&quot;
                        /&gt;
                      &lt;/div&gt;
                    ) : null}
                    {radio.inputIntroPosition === &quot;above&quot; &amp;&amp;
                    radio.inputIntro !== &quot;none&quot; &amp;&amp;
                    radio.inputIntro !== null ? (
                      &lt;div className=&quot;radio-content-wrapper&quot;&gt;
                        &lt;p className=&quot;radio-intro&quot;&gt;{radio.inputIntro}&lt;/p&gt;
                        &lt;p className=&quot;radio-label&quot;&gt;{radio.inputLabel}&lt;/p&gt;
                        &lt;p className=&quot;radio-description&quot;&gt;
                          {radio.inputDescription}
                        &lt;/p&gt;
                      &lt;/div&gt;
                    ) : radio.inputIntroPosition === &quot;below&quot; &amp;&amp;
                      radio.inputIntro !== &quot;none&quot; &amp;&amp;
                      radio.inputIntro !== null ? (
                      &lt;div className=&quot;radio-content-wrapper&quot;&gt;
                        &lt;p className=&quot;radio-label&quot;&gt;{radio.inputLabel}&lt;/p&gt;
                        &lt;p className=&quot;radio-intro&quot;&gt;{radio.inputIntro}&lt;/p&gt;
                        &lt;p className=&quot;radio-description&quot;&gt;
                          {radio.inputDescription}
                        &lt;/p&gt;
                      &lt;/div&gt;
                    ) : (
                      &lt;div className=&quot;radio-content-wrapper&quot;&gt;
                        &lt;p className=&quot;radio-label&quot;&gt;{radio.inputLabel}&lt;/p&gt;
                        &lt;p className=&quot;radio-description&quot;&gt;
                          {radio.inputDescription}
                        &lt;/p&gt;
                      &lt;/div&gt;
                    )}
                  &lt;/div&gt;
  
                  {radio.inputImagePosition === &quot;image-left&quot; ? (
                    &lt;div className=&quot;radio-button-wrapper&quot;&gt;
                      &lt;Radio value={radio.inputLabel} name={radio.inputLabel} /&gt;
                    &lt;/div&gt;
                  ) : null}
                &lt;/div&gt;
              &lt;/div&gt;
            )
          })}
        &lt;/div&gt;
      &lt;/RadioGroup&gt;
    )
  }
  
  export default InputRadioButton
  </code></pre>