title: State Not Getting Set As Required (React, Hooks)
body: <p>I am having trouble setting up a state of my component. Kindly check the details as below</p>
  <p>Codesandbox link - <a href="https://codesandbox.io/s/goofy-glade-z32zp" rel="nofollow noreferrer">https://codesandbox.io/s/goofy-glade-z32zp</a></p>
  <p>This is my App Component containing 4 sub components</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import &quot;./App.css&quot;;
  import RadioType from &quot;./components/Radio/RadioQuestion&quot;;
  import CheckBox from &quot;./components/Checkbox/CheckBox&quot;;
  import SelectType from &quot;./components/SelectBox/Selectbox&quot;;
  import Slider from &quot;./components/Slider/slider&quot;;
  import data from &quot;./components/jsonData/data.json&quot;;
  const App = (props) =&gt; {
    
    const [values, setValues] = useState();
  
    const setAnswerState = (details) =&gt; {
      let newState = [];
      if (values !== null &amp;&amp; values !== undefined) 
       newState = JSON.parse(JSON.stringify(values));
      if (newState === null || newState === undefined) {
        newState = [];
        newState.push(details);
      } else {
        if (
          newState.filter((x) =&gt; x.question_id === details.question_id).length ===
          0
        )
          newState.push(details);
        else {
          let indexOfFilteredObj = newState.indexOf(
            newState.filter((x) =&gt; x.question_id === details.question_id)[0]
          );
          newState[indexOfFilteredObj] = details;
        }
      }
  
      setValues(JSON.parse(JSON.stringify(newState)));
      console.log(values)
    };
    return (
      &lt;div className=&quot;App&quot;&gt;
        {JSON.stringify(values)}
        {data.map((v, i) =&gt; {
          return (
            &lt;div key={i}&gt;
              {v.question_type === &quot;radio&quot; &amp;&amp; (
                &lt;RadioType details={v} onChange={setAnswerState} /&gt;
              )}
              {v.question_type === &quot;checkbox&quot; &amp;&amp; (
                &lt;CheckBox details={v} onChange={setAnswerState} /&gt;
              )}
              {v.question_type === &quot;select&quot; &amp;&amp; (
                &lt;SelectType details={v} onChange={setAnswerState} /&gt;
              )}
              {v.question_type === &quot;slider&quot; &amp;&amp; (
                &lt;div style={{ marginLeft: &quot;300px&quot; }}&gt;
                  &lt;Slider details={v} onChangeState={setAnswerState} /&gt;
                &lt;/div&gt;
              )}
            &lt;/div&gt;
          );
        })}
      &lt;/div&gt;
    );
  };
  
  export default App;
  </code></pre>
  <p>Checkbox</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  const CheckBox = (props) =&gt; {
    const { details, onChange } = props;
    const [checkedValues, setCheckedValues] = useState([]);
    const setGlobalState = (value) =&gt; {
      let answer = value;
      let stateObj = {
        question_id: details.questionId,
        answers: answer,
        question_type: &quot;checkbox&quot;,
      };
      onChange(stateObj);
    };
    return (
      &lt;div&gt;
        &lt;div&gt;{details.question}&lt;/div&gt;
        &lt;label&gt;
          {details.answers === undefined
            ? null
            : details.answers.map((checkBoxAnswers, index) =&gt; {
                return (
                  &lt;div key={index}&gt;
                    &lt;input
                      type=&quot;checkbox&quot;
                      name={`checkbox_${details.questionId}`}
                      value={checkBoxAnswers}
                      onChange={(e) =&gt; {
                        let currentValues = checkedValues;
  
                        if (e.target.checked) currentValues.push(e.target.value);
                        else {
                          const index = currentValues.indexOf(e.target.value);
  
                          if (index &gt; -1) {
                            currentValues.splice(index, 1);
                          }
                        }
                        setCheckedValues(currentValues);
                        setGlobalState(currentValues);
                      }}
                    /&gt;
                    &lt;label key={index}&gt;{checkBoxAnswers}&lt;/label&gt;
                  &lt;/div&gt;
                );
              })}
        &lt;/label&gt;
        &lt;br /&gt;
      &lt;/div&gt;
    );
  };
  export default CheckBox;
  </code></pre>
  <p>Radio</p>
  <pre><code>import React from &quot;react&quot;;
  const RadioType = (props) =&gt; {
    const { details, onChange } = props;
    const setGlobalState = (value) =&gt; {
      let answer = [value];
      let stateObj = {
        question_id: details.questionId,
        answers: answer,
        question_type: &quot;radio&quot;,
      };
  
      onChange(stateObj);
    };
  
    return (
      &lt;div&gt;
        &lt;div&gt;{details.question}&lt;/div&gt;
        &lt;label&gt;
          {details.answers === undefined
            ? null
            : details.answers.map((radioQuestionAnswers, index) =&gt; {
                return (
                  &lt;div key={index}&gt;
                    &lt;input
                      type=&quot;radio&quot;
                      name={`radio_${details.questionId}`}
                      value={radioQuestionAnswers}
                      onChange={(e) =&gt; setGlobalState(e.target.value)}
                    /&gt;
                    &lt;label key={index}&gt;{radioQuestionAnswers}&lt;/label&gt;
                  &lt;/div&gt;
                );
              })}
        &lt;/label&gt;
        &lt;br /&gt;
      &lt;/div&gt;
    );
  };
  export default RadioType;
  </code></pre>
  <p>Select</p>
  <pre><code>import React from &quot;react&quot;;
  const SelectType = (props) =&gt; {
    const { details, onChange } = props;
    const setGlobalState = (value) =&gt; {
      let answer = [value];
      let stateObj = {
        question_id: details.questionId,
        answers: answer,
        question_type: &quot;select&quot;,
      };
      onChange(stateObj);
    };
  
    return (
      &lt;&gt;
          &lt;div&gt;{details.question}&lt;/div&gt;
          &lt;select
            name={`checkbox_${details.questionId}`}
            onChange={(e) =&gt; {
              setGlobalState(e.target.value);
            }}
          &gt;
            {details.answers === undefined
              ? null
              : props.details.answers.map((selectAns, index) =&gt; {
                  return (
                    &lt;option key={index} value={selectAns}&gt;
                      {selectAns}
                    &lt;/option&gt;
                  );
                })}
          &lt;/select&gt;
          
      &lt;/&gt;
    );
  };
  export default SelectType;
  </code></pre>
  <p>NouiSlider</p>
  <pre><code>import React from &quot;react&quot;;
  import Nouislider from &quot;nouislider-react&quot;;
  import &quot;nouislider/distribute/nouislider.css&quot;;
  
  const Slider = (props) =&gt; {
    const { details, onChangeState } = props;
    const setGlobalState = (value) =&gt; {
      let answer = [value];
      let stateObj = {
        question_id: details.questionId,
        answers: answer,
        question_type: &quot;slider&quot;,
      };
      onChangeState(stateObj);
    };
  
    return (
      &lt;&gt;
        &lt;Nouislider
          style={{ color: &quot;red&quot;, width: &quot;600px&quot; }}
          start={[0]}
          pips={{ mode: &quot;count&quot;, values: details.division }}
          clickablePips
          range={{
            min: details.range.min,
            max: details.range.max,
          }}
          onChange={(e) =&gt; {
            let valueOfSlider = parseFloat(e[0]);
            setGlobalState(valueOfSlider);
          }}
        /&gt;
      &lt;/&gt;
    );
  };
  export default Slider;
  </code></pre>
  <p>Coming to the problem whenever I try to set state from the radio checkbox or select it does set the state and updates correctly via setAnswerState method that is passed as prop to child. Whenever I try to change the slider the setAnswerState gets values as undefined or null, so the complete state that is set by other child components is lost, I am not able to find the reason behind state lost.</p>
  <p>Here is the sample data I used for testing</p>
  <pre><code>[
    {
      &quot;question&quot;: &quot;When was the Cilivar War?&quot;,
      &quot;question_type&quot;: &quot;radio&quot;,
      &quot;answers&quot;: [&quot;1877-1866&quot;, &quot;1877-1872&quot;, &quot;1877-1851&quot;, &quot;1877-1880&quot;],
      &quot;questionId&quot;: &quot;099011&quot;
    },
    
    {
      &quot;question&quot;: &quot;World's Largest country by population?&quot;,
      &quot;answers&quot;: [&quot;China&quot;, &quot;Canada&quot;, &quot;United kingdom&quot;, &quot;India&quot;],
      &quot;correctAns&quot;: &quot;China&quot;,
      &quot;question_type&quot;: &quot;checkbox&quot;,
      &quot;dependent_question_id&quot;: [
        {
          &quot;question_id&quot;: &quot;099011&quot;,
          &quot;answers_to_match&quot;: [
            {
              &quot;operator&quot;: &quot;AND&quot;,
              &quot;answers&quot;: [&quot;1877-1866&quot;]
            }
          ]
        }
      ],
      &quot;questionId&quot;: &quot;0990758&quot;
    },
    {
      &quot;question&quot;: &quot;Where is the Tajmahal?&quot;,
      &quot;answers&quot;: [&quot;Agra&quot;, &quot;Mumbai&quot;, &quot;Pune&quot;, &quot;Punjab&quot;],
      &quot;correctAns&quot;: &quot;Agra&quot;,
      &quot;question_type&quot;: &quot;select&quot;,
      &quot;dependent_question_id&quot;: [
        {
          &quot;question_id&quot;: &quot;099011&quot;,
          &quot;answers_to_match&quot;: [
            {
              &quot;operator&quot;: &quot;AND&quot;,
              &quot;answers&quot;: [&quot;1877-1866&quot;]
            }
          ]
        },
        {
          &quot;question_id&quot;: &quot;099078&quot;,
          &quot;answers_to_match&quot;: [
            {
              &quot;operator&quot;: &quot;AND&quot;,
              &quot;answers&quot;: [&quot;Canada&quot;, &quot;United kingdom&quot;]
            }
          ]
        }
      ],
      &quot;questionId&quot;: &quot;099096&quot;
    },
    {
      &quot;questionId&quot;: &quot;0002346&quot;,
      &quot;question_type&quot;: &quot;slider&quot;,
      &quot;division&quot;: 5,
      &quot;range&quot;: 
        {
          &quot;min&quot;: 0,
          &quot;max&quot;: 100
        }
      
    }
  ]
  </code></pre>