title: React Bootstrap button not recognising function onClick
body: <p>I have a React Bootstrap app with onclick Buttons. The first 2 buttons, play and pause work. The next buttons however do not even show in the react console as having an attached function prop.</p>
  
  <p>All buttons link to functions within the same scope and they are all near identical.</p>
  
  <p>I've tried changing the onClick calls and reducing the unrecognised functions to <code>console.log</code>s in case it was a function breaking them.</p>
  
  <pre><code>class Buttons extends React.Component{
  handleSelect =(e) =&gt; {
      this.props.gridSize(e);
  }
  render(){
      return(
          &lt;div className="buttonsDiv"&gt;
              &lt;ButtonToolbar&gt;
                  &lt;button className="btn" onClick={this.props.playButton}&gt;Play&lt;/button&gt;
                  &lt;button className="btn" onClick={this.props.pauseButton}&gt;Pause&lt;/button&gt;
                  &lt;button className="btn" onClick={this.props.clear}&gt;Clear&lt;/button&gt;
                  &lt;button className="btn" onClick={this.props.fast}&gt;Fast&lt;/button&gt;
                  &lt;button className="btn" onClick={this.props.slow}&gt;Slow&lt;/button&gt;
                  &lt;button className="btn" onClick={this.props.seed}&gt;Seed&lt;/button&gt;
                  &lt;DropdownButton 
                      title="Grid Size"
                      id="size-menu"
                      onSelect={this.handleSelect} &gt;
                      &lt;Dropdown.Item eventKey="1"&gt;20x10&lt;/Dropdown.Item&gt;
                      &lt;Dropdown.Item eventKey="2"&gt;50x30&lt;/Dropdown.Item&gt;
                      &lt;Dropdown.Item eventKey="3"&gt;70x50&lt;/Dropdown.Item&gt;
                  &lt;/DropdownButton&gt;
              &lt;/ButtonToolbar&gt;
          &lt;/div&gt;
      )
  }
  }
  
  class Main extends React.Component {
  constructor() {
  super();
  this.speed = 1100;
  this.rows = 30;
  this.cols = 50;
  
  this.state = {
    generation: 0,
    gridFull: Array(this.rows)
      .fill()
      .map(() =&gt; Array(this.cols).fill(false)) //make array of Rows and foreach row make an array of all the columns - making a grid.
  };
  }
  
   selectBox = (row, col) =&gt;{
    this.setState((previousState)=&gt;{
    let {gridFull} = previousState;
    gridFull[row][col] = !gridFull[row][col]
    return {gridFull: gridFull }
    });
  }
  
   seed = () =&gt; { 
    this.setState((prevState)=&gt; {
        let {gridFull} = prevState;
  
        for (let i=0; i&lt;this.rows; i++){
            for (let j=0; j&lt; this.cols; j++){
                if(Math.floor(Math.random() * 4) === 1){
                    gridFull[i][j] = true;
                }
            }
        }
        return {gridFull:gridFull}
    });
  }
  
    playButton =() =&gt; {
    clearInterval(this.intervalId)
    this.intervalId = setInterval(this.play, this.speed);
  }
  pauseButton =() =&gt; {
     clearInterval(this.intervalId);
  }
  
  slow =() =&gt; {
    console.log('hi')
   //   this.speed=100;
   //   this.playButton();
  }
  
  fast = () =&gt; {
    console.log(this.speed)
    this.speed =1000;
    this.playButton();
  }
  
  clear = () =&gt; {
   var grid = Array(this.rows).fill().map(() =&gt; 
   Array(this.cols).fill(false));
    this.setState({
        gridFull: grid,
        generation : 0
     });
  }
  
  play = () =&gt; {
  code
  
   }
  
  componentDidMount(){
  this.playButton();
  
     this.seed();
  }
    render() {
    return (
     &lt;div&gt;
       &lt;h1&gt;React Application&lt;/h1&gt;
       &lt;Buttons playButton ={this.playButton}
               pauseButton={this.pauseButton}
       /&gt;
       &lt;Grid
         gridFull={this.state.gridFull}
         rows={this.rows}
         selectBox={this.selectBox}
         cols={this.cols}
       /&gt;
  
       &lt;h2&gt;Generations: {this.state.generation}&lt;/h2&gt;
     &lt;/div&gt;
    );
  }
   }
  </code></pre>
  
  <p>So in the buttons toolbar the first 2 buttons work and the rest do not even show functions as props in the react console.</p>
  
  <p>As you can see they both call functions within the same scope, so I don't know what's happening.</p>