React hooks useState Array

Question

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        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

User · Answer

Try to keep your state minimal  There is no need to store      const initialValue           id  0 value    --- Select a State ---        as state  Separate the permanent from the changing  const ALL STATE VALS           id  0 value    --- Select a State ---          id  1  value   Alabama           id  2  value   Georgia           id  3  value   Tennessee         Then you can store just the id as your state    const StateSelector        gt     const  selectedStateOption  setselectedStateOption    useState 0      return        lt div gt         lt label gt Select a State  lt  label gt         lt select gt           ALL STATE VALS map  option  index    gt               lt option key  option id  selected  index   selectedStateOption  gt  option value  lt  option gt                     lt  select gt       lt  div gt

User · Answer

To expand on Ryan s answer   Whenever setStateValues is called  React re-renders your component  which means that the function body of the StateSelector component function gets re-executed    React docs      setState   will always lead to a re-render unless   shouldComponentUpdate   returns false    Essentially  you re setting state with   setStateValues allowedState     causing a re-render  which then causes the function to execute  and so on  Hence  the loop issue   To illustrate the point  if you set a timeout as like     setTimeout           gt  setStateValues allowedState       1000       Which ends the  too many re-renders  issue    In your case  you re dealing with a side-effect  which is handled with UseEffectin your component functions  You can read more about it here

User · Answer

The accepted answer shows the correct way to setState but it does not lead to a well functioning select box   import React    useState   from  react    import ReactDOM from  react-dom    const initialValue     id  0 value    --- Select a State ---      const options           id  1  value   Alabama           id  2  value   Georgia           id  3  value   Tennessee        const StateSelector        gt          const   selected  setSelected     useState initialValue           return           lt div gt             lt label gt Select a State  lt  label gt             lt select value  selected  gt               selected     initialValue  amp  amp                    lt option disabled value  initialValue  gt  initialValue value  lt  option gt                options map  localState  index    gt                    lt option key  localState id  value  localState  gt                      localState value                  lt  option gt                              lt  select gt           lt  div gt                const rootElement   document getElementById  root    ReactDOM render  lt StateSelector   gt   rootElement

User · Answer

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        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               BEGINNING OF CHANGE          useEffect      gt           Should not ever set state during rendering  so do this in useEffect instead      setStateValues allowedState                         END OF CHANGE           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     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

User · Answer

use state is not always needed you can just simply do this let paymentList           quot id quot  249  quot txnid quot   quot 2 quot   quot fname quot   quot Rigoberto quot      quot id quot  249  quot txnid quot   quot 33 quot   quot fname quot   quot manuel quot      then use your data in a map loop like this in my case it was just a table and im sure many of you are looking for the same  here is how you use it   lt div className  quot card-body quot  gt               lt div className  quot table-responsive quot  gt                   lt table className  quot table table-striped quot  gt                       lt thead gt                           lt tr gt                               lt th gt Transaction ID lt  th gt                               lt th gt Name lt  th gt                           lt  tr gt                       lt  thead gt                       lt tbody gt                                                        paymentList map  payment  key    gt                                     lt tr key  key  gt                                       lt td gt  payment txnid  lt  td gt                                       lt td gt  payment fname  lt  td gt                                   lt  tr gt                                                                                lt  tbody gt                   lt  table gt               lt  div gt           lt  div gt

[reactjs] React hooks useState Array

Examples related to reactjs

Examples related to react-hooks