title: React hooks useState Array
body: <p>I tried looking for resetting <code>useState</code> array values in here but could not find any references to array values.</p>
  
  <p>Trying to change the drop down value from initial state to allowedState values. I am using hooks method here to set the values using <code>setStateValues</code>. If I comment that line of code, it displays the drop down. I could not understand why cannot I use <code>setStateValues</code> method to reset the state variable values.</p>
  
  <p>I am getting this following error:</p>
  
  <blockquote>
    <p>Too many re-renders. React limits the number of renders to prevent an infinite loop</p>
  </blockquote>
  
  <p>Is there something wrong in here?</p>
  
  <pre><code>    import React, { useState } from "react"; 
      import ReactDOM from "react-dom";
  
      const StateSelector = () =&gt; {   
      const initialValue = [
      { id: 0,value: " --- Select a State ---" }];
  
        const allowedState = [
          { id: 1, value: "Alabama" },
          { id: 2, value: "Georgia" },
          { id: 3, value: "Tennessee" }
          ];
  
        const [stateOptions, setStateValues] = useState(initialValue);  
        // initialValue.push(...allowedState);
  
        console.log(initialValue.length);
  
        setStateValues(allowedState); // Not sure why cannot I reset the state in here for an array.
  
           return (&lt;div&gt;
            &lt;label&gt;Select a State:&lt;/label&gt;
            &lt;select&gt;
              {stateOptions.map((localState, index) =&gt; (
                &lt;option key={localState.id}&gt;{localState.value}&lt;/option&gt;
              ))}
            &lt;/select&gt;
          &lt;/div&gt;   ); };
  
      const rootElement = document.getElementById("root");
      ReactDOM.render(&lt;StateSelector /&gt;, rootElement);
  </code></pre>