title: React Native - accessing component state variables within map function
body: <p>I'm trying to access my component's state attributes within a map function. I bind my renderInputControl function and am utilizing ES6 syntax to map across my inputs. I also placed a debugger outside of my map function and am able to access my state, but when placing the debugger inside the map function, I get an undefined error and lost scope. Am I incorrectly binding my function?</p>
  
  <pre><code>constructor() {
      super()
  
      this.state = {
        currentSelection: '',
        currentInputValue: '',
      }
  
      this.renderInputControl = this.renderInputControl.bind(this)
      this.handleOnPress = this.handleOnPress.bind(this)
    }
  
  renderInputControl() {
      // debugger
      return this.props.input.options_labels_en.map((label, index) =&gt; {
        let numberSign = '  '
        if (input.show_points == true) {
          if (optionValues[index] &gt; 0) {
            numberSign = '+'
          } else if (optionValues[index] &lt; 0) {
            numberSign = ''
          }
        }
        // debugger
        return (
          &lt;TouchableHighlight
            onPress={() =&gt; this.handleOnPress(input.name, label, optionValues[index])}
            key={index}
            &gt;
            &lt;View style={this.state.currentSelection == label ? test.selectedInputControl : test.unselectedInputControl}&gt;
              &lt;View style={{flexDirection: 'row'}}&gt;
                &lt;Text style={[{flex: 9}, this.state.currentSelection == label ? test.selectedText : test.unselectedText]}&gt;{label}&lt;/Text&gt;
                &lt;Text style={[{flex: 1, alignSelf: 'center', textAlign: 'center'}, this.state.currentSelection == label ? test.selectedText : test.unselectedText]}&gt;{`${numberSign}${optionValues[index]}`}&lt;/Text&gt;
              &lt;/View&gt;
            &lt;/View&gt;
          &lt;/TouchableHighlight&gt;
  
        )
      })
    }
  </code></pre>