title: Cannot destructure an object
body: <p>I fetched and object which contains two properties, one is a number and one is an array. So I right away accessed the array and then assigned to a state and then passed each item to another component through context api. And it does not working. Here is my code:</p>
  <pre><code>const [info, setInfo] = useState([]);
  const [i, setI] = useState(0);
  
  const fetchUrl = async() =&gt; {
      setLoading(true);
      const response = await fetch(url);
      const data = await response.json();
      setInfo(data.results);
      setLoading(false);
  } 
  
  useEffect(() =&gt; {
      fetchUrl();
  }, []);
  
  const {correct_answer, incorrect_answers, question} = info[i];
  const arr = [correct_answer, ...incorrect_answers].sort((a, b) =&gt; a.length - b.length);
  </code></pre>
  <p>In this code 'correct_answer' is a string and 'incorrect_answers' is an array. After running this code it says:</p>
  <blockquote>
  <p>TypeError: Cannot destructure property 'correct_answer' of 'info[i]' as it is undefined.</p>
  </blockquote>
  <p>And sometimes it says:</p>
  <blockquote>
  <p>TypeError: 'incorrect_answers' is not iterable.</p>
  </blockquote>
  <p>How do I fix this problem?</p>