title: Why is this react child component attribute value Undefined?
body: <p>I am learning ReactJS and I am trying to create a simple quiz using react components. I have three components:</p>
  
  <p><strong>FinalDiv</strong> -- parent component</p>
  
  <ul>
  <li><strong>Question</strong>: Displays Question</li>
  <li><strong>Answer</strong>: Displays options for that question</li>
  </ul>
  
  <p>Both are child component of <strong>FinalDiv</strong></p>
  
  <p>For calculation of correct and incorrect answer and to move to next question I am using method <em>processor</em>. </p>
  
  <p>My problem is that I am unable to get the value of selected option from <strong>Answer</strong> component. Value of option is stored in <em>capvalue</em> attribute of <strong>Answer</strong>.</p>
  
  <p>So far, I have tried event.target.value to access that value in <em>processor</em> method. But it gives undefined when printing in console.</p>
  
  <p>I have also tried <em>this.capvalue</em>. But same result.</p>
  
  <p>Mind that it is giving correct value when printing just before rendering, but when printing in <em>processor</em> method it is giving <em>Undefined</em> value because of which I am not able to check if selected answer is correct. See 2 comments in code: </p>
  
  <pre><code>import React, {Component} from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import * as serviceWorker from './serviceWorker';
  
  const questionBoxStyle = {
  backgroundColor : 'cyan',
  textAlign : 'center',
  width : '30%',
  height : '50px',
  marginLeft : '35%',
  marginTop : '50px',
  marginBottom : '50px'
  }
  
  const btnBoxStyle = {
  backgroundColor : 'orange',
  textAlign : 'center',
  width : '30%',
  height : '50px',
  marginLeft : '35%',
  }
  
  class Question extends Component {
  render() {
      return(
          &lt;div style={this.props.style}&gt;
              What is the capital of {this.props.country} ?
          &lt;/div&gt;
      )
  }
  }
  
  class Answer extends Component {
  render() {
      return(
          &lt;button onClick={this.props.doOnClick} style={this.props.style}&gt;
              &lt;h3&gt;{this.props.capvalue}&lt;/h3&gt;
          &lt;/button&gt;
      )
  }
  }
  
  class FinalDiv extends Component {
  
  constructor(props) {
      super(props);
          this.state = {
              oq : [
                  {
                      q : 'India',
                      op : ['Delhi','Mumbai','Kolkata','Chennai'],
                      correct : 'Delhi'
                  },
                  {
                      q : 'USA',
                      op : ['DC','New York','Chicago','LA'],
                      correct : 'DC'
                  },
                  {
                      q : 'UK',
                      op : ['Plymouth','London','Manchester','Derby'],
                      correct : 'London'
                  },
                  {
                      q : 'Germany',
                      op : ['Dortmund','Frankfurt','Berlin','Munich'],
                      correct : 'Berlin'
                  }
              ],
              correct : 0,
              incorrect : 0,
              currIndex : 0
          }
          this.processor = this.processor.bind(this);
  
  }
  
  processor(event) {
  // prints undefined in below line
      console.log('selected: '+event.target.capvalue+' -- actual answer: '+this.state.oq[this.state.currIndex].correct)
      if(this.capvalue === this.state.oq[this.state.currIndex].correct) {
          this.setState({
              correct : this.state.correct+1,
          })
      } else {
          this.setState({
              incorrect : this.state.incorrect+1,
          })
      }
      if(this.state.currIndex === 3) {
          this.setState({
              currIndex : 0
          })
      } else {
          this.setState({
              currIndex : this.state.currIndex+1 
          })
      }
  }
  
  render() {
      return(
          &lt;div&gt;
              &lt;Question style={questionBoxStyle} country= 
   {this.state.oq[this.state.currIndex].q}/&gt;
              {
                  this.state.oq[this.state.currIndex].op.map((value, index) 
  =&gt; {
  // if i try to print the value here, it prints correctly
                  console.log('current index: '+this.state.currIndex+
  ' -- correct: '+this.state.correct+' -- incorrect: '+this.state.incorrect)
                     return &lt;Answer key={index} style={btnBoxStyle} 
  capvalue={value} doOnClick={this.processor}/&gt;
                 })
              }
              &lt;div style={questionBoxStyle}&gt; &lt;h2&gt; Correct : 
  {this.state.correct} &lt;/h2&gt; &lt;/div&gt;
              &lt;div style={questionBoxStyle}&gt; &lt;h2&gt; InCorrect : 
  {this.state.incorrect} &lt;/h2&gt; &lt;/div&gt;
          &lt;/div&gt;
      )
  }
  }
  
  ReactDOM.render(&lt;FinalDiv /&gt;, document.getElementById('root'));
  
  
  serviceWorker.unregister();
  </code></pre>
  
  <p>My guess is that <em>processor</em> method is not able to access the <em>Answer</em> component's attribute in parent component(FinalDiv). So something needs to be done in child component itself(Answer component), but I don't know what. Do I somehow pass state to Child component or something?</p>
  
  <p>Please let me know if you know additional information or if question formatting is wrong. </p>
  
  <p>I recently got unblocked from asking questions.</p>