title: How to render different view when onClick button in ReactJS?
body: <p>I have made component called content which displays match details of 16 matches. Now there is a button called view stats which onclick should render different view displaying details of that particular match. How can I make this in ReactJs. See screenshot for more clarification. </p>
  
  <p>Content component :</p>
  
  <pre><code>import React, { Component } from 'react';
  import Matchinfo from './matchinfo';
  import './content.css';
  
  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(0,16),
          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;
          }
  
      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>In matchinfo component which must be rendered on click event:</p>
  
  <pre><code>import React, { Component } from 'react';
  
  class Matchinfo extends Component {
      constructor(props){
          super(props);
          this.state = {
              info:[],
              loading:true
          };
      console.log("Test");
      }
  
      componentWillMount(){
          fetch(`api/match/${this.props.match_id}`)
          .then(res =&gt; res.json())
          .then(res =&gt; {
        console.log(res)
        this.setState({
          info:res,
          loading:false
        })
      })
      }
  
    render() {
  
      if (this.state.loading) {
              return &lt;img src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif" alt=""/&gt;
      }
  
      const {info} = this.state;
  
      return (
        &lt;div&gt;
                           &lt;p className="match"&gt;MATCH {info.id}&lt;/p&gt;
                          &lt;h4&gt;{info.team1}&lt;/h4&gt;
                          &lt;p&gt;VS&lt;/p&gt;
                          &lt;h4&gt;{info.team2}&lt;/h4&gt;
                          &lt;div className="winner"&gt;
                              &lt;h3&gt;WINNER&lt;/h3&gt;
                              &lt;h4&gt;{info.winner}&lt;/h4&gt;
                          &lt;/div&gt;
  
        &lt;/div&gt;
      );
    }
  }
  
  export default Matchinfo;
  </code></pre>
  
  <p>Screenshot:</p>
  
  <p><a href="https://i.stack.imgur.com/x1Qa6.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/x1Qa6.jpg" alt="enter image description here"></a></p>