title: Props are undefined in React
body: <p>I'm new to <code>js</code> and <code>reactjs</code>. I'm trying to create a <code>ButtonGroup</code> with few <code>Buttons</code> inside, in hope of when I click a particular <code>Button</code> (in <code>ButtonGroup</code>) only that particular button will get highlighted (change colour) and rest will be of normal colour.
  Below is the code which does the above behaviour but in <code>setColour</code> method I'm getting an error <code>_this.state.selected.props is undefined</code>. Could someone point out the where I'm getting wrong ? Also, if someone can tell me if this is the correct way to approach this problem. </p>
  
  <pre class="lang-js prettyprint-override"><code>import React from "react"
  import {
      ButtonGroup,
      Button
  } from "reactstrap"
  
  
  class MainButtonsGroup extends React.Component {
  constructor (props) {
      super(props)
      this.state = {
          selected: null
      }
  }
  
  handleSelection = (e) =&gt; {
      this.setState({selected: e.target})
  }
  
  setColour = (key) =&gt; {
      if (this.state.selected)
      {
          // ERROR : _this.state.selected.props is undefined
          return (this.state.selected.props.key === key) ? 'primary' : 'secondary'
      }
  }
  
  render() {
      return (
          &lt;ButtonGroup&gt;
              &lt;Button key={1} onClick={this.handleSelection} color={this.setColour(1)}&gt;MainButtonA&lt;/Button&gt;
              &lt;Button key={2} onClick={this.handleSelection} color={this.setColour(2)}&gt;MainButtonB&lt;/Button&gt;
              &lt;Button key={3} onClick={this.handleSelection} color={this.setColour(3)}&gt;MainButtonC&lt;/Button&gt;
          &lt;/ButtonGroup&gt;
      )
  }
  }
  
  export default MainButtonsGroup;
  </code></pre>