title: How to pass data between components in ReactJS?
body: <p>I have made 2 components :
  1) content (which displays data using fetch() )
  2) pagination (total 5 pages 16 objects per page )</p>
  
  <p>I have made 2 state variables called <code>start:0</code> and <code>end:16</code>. Now whenever user clicks on page numbers I want to inject start and end state variables from pagination component to content component. </p>
  
  <p>Logic for passing start and end variables to content is as follows:
  initially end=16*1 (1 is multiplied because page 1) and start= end-16 i.e start=0 </p>
  
  <p>end = 16*2 (2 is multiplied because page 2) and start=end-16 i.e start=16</p>
  
  <p>These start and end variables are passed in <code>.slice()</code> of content component so that onClick:
   page 1 it should display article 0 to 16 
  page 2 it should display article 16 to 32 and so on till page 5</p>
  
  <p>Below is code of pagination and content component:</p>
  
  <p>content.js :</p>
  
  <pre><code>class Content extends Component {
  
      constructor(props){
          super(props);
          this.state = {
              matches:[],
              loading:true,
              callmatchinfo: false,
              matchid:''
          };
      }
  
      componentDidMount(){
          fetch('api/matches')
          .then(res =&gt; res.json())
          .then(res =&gt; {
        console.log(res)
        this.setState({
          matches:res.slice(this.props.start,this.props.end),  &lt;---add new start and end everytime we click on new page number
          loading:false
        });
      })
      }
  
    viewstats(matchid){
      this.setState({
          callmatchinfo: true,
          matchid: matchid
      });
    }
  
    rendermatchinfo(){
      return &lt;Matchinfo matchid={this.state.matchid} /&gt;
    }
  
      renderMatches() {
          return this.state.matches.map(match =&gt; {
              return (
                  &lt;div className="col-lg-3"&gt;
                      &lt;div id="content"&gt;
                          &lt;p className="match"&gt;MATCH {match.id}&lt;/p&gt;
                          &lt;h4&gt;{match.team1}&lt;/h4&gt;
                          &lt;p&gt;VS&lt;/p&gt;
                          &lt;h4&gt;{match.team2}&lt;/h4&gt;
                          &lt;div className="winner"&gt;
                              &lt;h3&gt;WINNER&lt;/h3&gt;
                              &lt;h4&gt;{match.winner}&lt;/h4&gt;
                          &lt;/div&gt;
                          &lt;div className="stats"&gt;
                              &lt;button type="button" onClick= {()=&gt;{this.viewstats(match.id)}} className="btn btn-success"&gt;View Stats&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              );
          })
      }
  
      render() {
  
          if (this.state.loading) {
              return &lt;img src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif" /&gt;
          }
          else if(this.state.callmatchinfo){
          return &lt;Matchinfo match_id={this.state.matchid} /&gt;
          }
  
      return (
        &lt;div&gt;
            &lt;div className="row"&gt;
              {this.renderMatches()}
                &lt;/div&gt;
            &lt;div className="row"&gt;
              {this.state.callmatchinfo ? this.rendermatchinfo() : ''}
            &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default Content;
  </code></pre>
  
  <p>pagination.js:</p>
  
  <pre><code>class Pagination extends Component {
  
      constructor(props){
          super(props)
          this.state = {
              start:0,
              end:16
          };
      }
  
      handleClick(){
          this.setState{
              end:getpagenumber()*16,
              start:end-16
          }
      }
  
      getpagenumber(val){
          return val;
      }
  
  
    render() {
      let{start,end} = this.state;
  
      return (
        &lt;div&gt;
          &lt;Content/&gt;
            &lt;div className="container"&gt;                 
                &lt;ul className="pagination"&gt;
                 &lt;li {this.getpagenumber(1)} onClick={this.handleClick}&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
                  &lt;li {this.getpagenumber(2)} onClick={this.handleClick}&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
                  &lt;li {this.getpagenumber(3)} onClick={this.handleClick}&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
                  &lt;li{this.getpagenumber(4)} onClick={this.handleClick}&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
                  &lt;li{this.getpagenumber(5)} onClick={this.handleClick}&gt;&lt;a href="#"&gt;5&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default Pagination;
  </code></pre>
  
  <p>Screenshot which displays match articles till 16 which is end=16 :
  <a href="https://i.stack.imgur.com/l5lyX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/l5lyX.png" alt="enter image description here"></a></p>