Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React hooks useState Array

I tried looking for resetting useState array values in here but could not find any references to array values.

Trying to change the drop down value from initial state to allowedState values. I am using hooks method here to set the values using setStateValues. If I comment that line of code, it displays the drop down. I could not understand why cannot I use setStateValues method to reset the state variable values.

I am getting this following error:

Too many re-renders. React limits the number of renders to prevent an infinite loop

Is there something wrong in here?

    import React, { useState } from "react";      import ReactDOM from "react-dom";      const StateSelector = () => {        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 (<div>           <label>Select a State:</label>           <select>             {stateOptions.map((localState, index) => (               <option key={localState.id}>{localState.value}</option>             ))}           </select>         </div>   ); };      const rootElement = document.getElementById("root");     ReactDOM.render(<StateSelector />, rootElement); 
like image 822
shavi Avatar asked Dec 17 '18 22:12

shavi


People also ask

How do you use array in useState Hook?

Creating an Array state with useState()import React from "react"; const { useState } = React; const [myArray, setMyArray] = useState([]); We destructure the return value of the useState() hook to get a variable that contains the state array and a method for updating the state.

How do you use useState for array of objects in React?

To type the useState hook as an array of objects in React, use the hook's generic, e.g. const [employees, setEmployees] = useState<{salary: number; name: string}[]>([]) . The state variable can be initialized to an empty array and will only accept objects of the specified type. Copied!

Does useState return array?

Going back to the useState hook, it returns its variables in an array because it is likely that we're going to use that hook more than once per component. We need to be able to instantiate that hook several times but each instance has a different name. Example: const [val, setVal] = useState(0);


1 Answers

You should not set state (or do anything else with side effects) from within the rendering function. When using hooks, you can use useEffect for this.

The following version works:

import React, { useState, useEffect } from "react"; import ReactDOM from "react-dom";  const StateSelector = () => {   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);   // ****** BEGINNING OF CHANGE ******   useEffect(() => {     // Should not ever set state during rendering, so do this in useEffect instead.     setStateValues(allowedState);   }, []);   // ****** END OF CHANGE ******    return (<div>     <label>Select a State:</label>     <select>       {stateOptions.map((localState, index) => (         <option key={localState.id}>{localState.value}</option>       ))}     </select>   </div>); };  const rootElement = document.getElementById("root"); ReactDOM.render(<StateSelector />, rootElement); 

and here it is in a code sandbox.

I'm assuming that you want to eventually load the list of states from some dynamic source (otherwise you could just use allowedState directly without using useState at all). If so, that api call to load the list could also go inside the useEffect block.

like image 165
Ryan Cogswell Avatar answered Sep 21 '22 22:09

Ryan Cogswell