title: Too many re-renders. React limits the number of renders to prevent an infinite loop. - React Hooks
body: <p>I'm new to <code>React</code> hooks here, I've a sidebar I want to update the <code>selecetedIndex</code> to the index selected for that <code>ListItem</code> i.e., when I select an item I want to update <code>selectedIdx</code> to index to show it selected. I'm doing something wrong.</p>
  
  <pre><code>      &lt;ListItem button key={index}
                  selected={selectedIdx===index} // to show selected need to update
                  onclick={setSelectedIdx(index)}
                &gt;
                    &lt;ListItemIcon&gt;{v.icon}&lt;/ListItemIcon&gt;
                    &lt;ListItemText primary={v.text} /&gt;
        &lt;/ListItem&gt;
  
  
   let [selectedIdx,setSelectedIdx]=React.useState(0);
  </code></pre>
  
  <p>This way second try I did but not results:</p>
  
  <pre><code>         &lt;ListItem button key={index}
                          selected={selectedIdx===index}
                          onclick={handleSelectedIdx(index)}
                        &gt;
                            &lt;ListItemIcon&gt;{v.icon}&lt;/ListItemIcon&gt;
                            &lt;ListItemText primary={v.text} /&gt;
           &lt;/ListItem&gt;
  
  function handleSelectedIdx(i){
      setSelectedIdx(i)}
  </code></pre>
  
  <p>I'm new I don't know how do we do <code>this.setState</code> in hooks. Both the ways it failed can anyone please let me know were I'm going wrong. Any help appreciated.</p>
  
  <p>Updates: here I don't use:</p>
  
  <pre><code>{()=&gt;{handleDrawerToggle}}
  </code></pre>
  
  <p>Still the following works why is that so? Can you please let us know?</p>
  
  <pre><code>&lt;IconButton
          color="inherit"
          aria-label="Open drawer"
          edge="start"
          onClick={handleDrawerToggle}
          className={classes.menuButton}
        /&gt;
  
     function handleDrawerToggle() {
        setMobileOpen(!mobileOpen);  }
  
    const [mobileOpen, setMobileOpen] = React.useState(false);
  </code></pre>