title: Understanding nesting vs parent in ReactJS
body: <p>I have a class called: QuestionList, which creates Questions children, along with (nested) Alternatives:</p>
  
  <p><code>QuestionList</code> render:</p>
  
  <pre><code>&lt;Question wording="wording..."&gt;
    &lt;Alternative letter="a" text="bla ..." /&gt;
    &lt;Alternative letter="b" text="ble ..." /&gt;
    &lt;Alternative letter="c" text="bli ..." /&gt;
    &lt;Alternative letter="d" text="blo ..." /&gt;
  &lt;/Question&gt;
  </code></pre>
  
  <ol>
  <li><p>Who is "alternatives" parent? Question (because it is nested) or QuestionList (because it created)?</p></li>
  <li><p>How can pass a Question event handler to Alternative? </p></li>
  </ol>
  
  <p>If I use</p>
  
  <pre><code>&lt;Alternative onClick={this.handleClick} (...) /&gt; 
  </code></pre>
  
  <p>It will pass QuestionList's handler (and not Question's handler - the desired behavior).</p>
  
  <p><strong>QuestionList</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import InfiniteScroll from 'react-infinite-scroller';
  import Loader from 'react-loaders';
  import Question from './Question';
  import Alternative from './Alternative';
  
  export default class QuestionList extends Component {
  constructor(props) {
      super(props);
  
      this.state = {
          questions: []
      };
  }
  
  loadItems(page) {
      let questions = this.state.questions;
  
      axios.get('https://jsonplaceholder.typicode.com/photos?_start='+ page * 5 +'&amp;_limit=5')
          .then(response =&gt; {
              console.log(response.data);
              response.data.map(p =&gt; {
                  questions.push(p);
              });
  
              this.setState({questions});
          });
  }
  
  handleClick() {
      alert("QuestionList");
  }
  
  render() {
      let items = [];
      const loader = &lt;Loader type="ball-scale-multiple" /&gt;;
  
      this.state.questions.map((p, i) =&gt; {
          items.push(
              &lt;Question
                  title={p.title}
                  key={i}
                  id={p.id}
              &gt;
                  &lt;Alternative onClick={this.props.handleClick} key={1} text={ p.title } letter="a" /&gt;
                  &lt;Alternative onClick={this.props.handleClick} key={2} text={ p.title } letter="b" /&gt;
                  &lt;Alternative onClick={this.props.handleClick} key={3} text={ p.title } letter="c" /&gt;
                  &lt;Alternative onClick={this.props.handleClick} key={4} text={ p.title } letter="d" /&gt;
                  &lt;Alternative onClick={this.props.handleClick} key={5} text={ p.title } letter="e" /&gt;
              &lt;/Question&gt;
          )
      });
  
      return (
          &lt;InfiniteScroll
              key={1}
              pageStart={0}
              loadMore={this.loadItems.bind(this)}
              hasMore={true}
              loader={loader}
          &gt;
  
              &lt;div className="justify-content-center" id="react-app-questions-list"&gt;
                  {items}
              &lt;/div&gt;
          &lt;/InfiniteScroll&gt;
      );
  }
  }
  </code></pre>
  
  <p><strong>Question</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  
  export default class Question extends Component {
  constructor(props) {
      super(props);
  
      this.state = {
          answer_class: "unanswered"
      };
  }
  
  handleClick(isCorrect, e) {
      // alert(this.props.id + ": " + isCorrect);
      alert("Question");
  }
  
  render() {
      return (
          &lt;div className={"list-group list-group-bordered mb-3 " + this.state.answer_class}&gt;
              &lt;div className="list-group-item"&gt;
                  &lt;div className="list-group-item-body"&gt;
                      &lt;h4 className="list-group-item-title"&gt;
                          { this.props.title }
                      &lt;/h4&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              { this.props.children }
          &lt;/div&gt;
      );
  }
  }
  </code></pre>
  
  <p><strong>Alternative</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  
  class Alternative extends Component {
  render() {
      return (
          &lt;a className="list-group-item list-group-item-action react-app-alternative"&gt;
              &lt;div className="list-group-item-figure"&gt;
                  &lt;div className="tile tile-circle bg-primary"&gt;{ this.props.letter }&lt;/div&gt;
              &lt;/div&gt;
              &lt;div className="list-group-item-body"&gt; { this.props.text }&lt;/div&gt;
          &lt;/a&gt;
      );
  }
  }
  
  export default Alternative;
  </code></pre>