title: why onclick called react material-ui
body: <p>I write react component with dialog and list. When component recieve "open" prop and try to build list in render function, it's call <code>onClick={ this.handleToggle(item.id) }</code> function of ListItem, so, that causes an infinite loop "render -> onClick -> setState -> render -> ... ". Why? And how can I get around this?</p>
  
  <pre><code>handleToggle(value) {
     if (this.state.isLoading) {
         return;
     }
  
      const {checked} = this.state;
      const currentIndex = checked.indexOf(value);        
      const newSelected = checked.slice();
  
      if (currentIndex === -1) {
          newSelected.push(value);
      } else {
          newSelected.splice(currentIndex, 1);
      }
      this.setState({checked: newSelected});
  }
  
  render() {  
      if (!this.props.show) {
          return null;
      }
      if (this.state.isLoading) {
          return(&lt;p&gt;Loading...&lt;/p&gt;);
      }
  
      const {classes, show, caption} = this.props;
      const {checked, projects} = this.state;
  
      return (
          &lt;Dialog
              open={show}
              onClose={this.onCancel}
              aria-labelledby="form-dialog-title"&gt;
                  &lt;DialogTitle id="form-dialog-title"&gt;{caption}&lt;/DialogTitle&gt;
                  &lt;DialogContent&gt;
                      &lt;List&gt;
                          {projects.map(item =&gt; 
                              &lt;ListItem
                                  key={item.id}
                                  role={undefined}
                                  dense
                                  button
                                  onClick={ this.handleToggle(item.id) }
                                  className={classes.listItem}
                              &gt;
                                  &lt;Checkbox 
                                      tabIndex={-1} 
                                      disableRipple
                                      checked={checked.indexOf(item.id) !== -1}
                                  /&gt;
                                  &lt;ListItemText primary={item.name}/&gt;
                              &lt;/ListItem&gt;
                              ) }
                      &lt;/List&gt;
                  &lt;/DialogContent&gt;
                  &lt;DialogActions&gt;
                      &lt;Button onClick={this.onSuccess} color="primary"&gt;OK&lt;/Button&gt;
                      &lt;Button onClick={this.onCancel} color="secondary"&gt;Cancel&lt;/Button&gt;
                  &lt;/DialogActions&gt;
          &lt;/Dialog&gt;
      );
  }
  </code></pre>