title: Setting state for toggle button value after change in NextJS/React
body: <p>I have a series of toggle buttons which toggle between values 'pending' and 'active'.
  When onChange, I make a post request to update the value of the element that was toggled in the database. However, I want to be able to change the value of the element to its new value once toggled, locally.</p>
  <p>I know I can use useState hooks, but the issue is that there can be potentially 100s of these elements, so I think that's out of question. Is there some other way I can update the value of the element?</p>
  <p>This is what I'm currently working with</p>
  <pre><code>  const toggleChange = async (e) =&gt; {
      let elemId = e.target.id;
      let newStatus; 
      if (e.target.value === 'pending') {
        newStatus = 'active';
      } else if (e.target.value === 'active') {
        newStatus = 'pending';
      }
       
      // post request
      await updateStatus(elemId, newStatus);
    };
  
  
  
   return (
   ...
   &lt;Switch
   onChange={(e) =&gt; {
       toggleChange(e);
    }}
    defaultChecked={status == 'active' ? true : false}
    id={elem_id}
    value={status}
   /&gt;
   )
  </code></pre>