How to render different view when onClick button in ReactJS?

Question

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.

Content component :

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 => res.json())
        .then(res => {
      console.log(res)
      this.setState({
        matches:res.slice(0,16),
        loading:false
      });
    })
    }

  viewstats(matchid){
    this.setState({
        callmatchinfo: true,
        matchid: matchid
    });
  }

  rendermatchinfo(){
   return <Matchinfo matchid={this.state.matchid} />
  }

    renderMatches() {
        return this.state.matches.map(match => {
            return (
                <div className="col-lg-3">
                    <div id="content">
                        <p className="match">MATCH {match.id}</p>
                        <h4>{match.team1}</h4>
                        <p>VS</p>
                        <h4>{match.team2}</h4>
                        <div className="winner">
                            <h3>WINNER</h3>
                            <h4>{match.winner}</h4>
                        </div>
                        <div className="stats">
                            <button type="button" onClick= {()=>{this.viewstats(match.id)}} className="btn btn-success">View Stats</button>
                        </div>
                    </div>
                </div>
            );
        })
    }

    render() {

        if (this.state.loading) {
            return <img src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif" />
        }

    return (
      <div>
          <div className="row">
            {this.renderMatches()}
              </div>
          <div className="row">
            {this.state.callmatchinfo ? this.rendermatchinfo() : ''}
          </div>
      </div>
    );
  }
}

export default Content;

In matchinfo component which must be rendered on click event:

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 => res.json())
        .then(res => {
      console.log(res)
      this.setState({
        info:res,
        loading:false
      })
    })
    }

  render() {

    if (this.state.loading) {
            return <img src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif" alt=""/>
    }

    const {info} = this.state;

    return (
      <div>
                         <p className="match">MATCH {info.id}</p>
                        <h4>{info.team1}</h4>
                        <p>VS</p>
                        <h4>{info.team2}</h4>
                        <div className="winner">
                            <h3>WINNER</h3>
                            <h4>{info.winner}</h4>
                        </div>

      </div>
    );
  }
}

export default Matchinfo;

Screenshot:

I suggest to use react route github.com/ReactTraining/react-router — Ali Faris
– Ali Faris, Commented Jan 27, 2018 at 13:46
@Ali Can it be done without react-router as I have a button. — stone rock
– stone rock, Commented Jan 27, 2018 at 13:46
whats the issue, component is not rendering on button Click? — Mayank Shukla
– Mayank Shukla, Commented Jan 27, 2018 at 13:48

Ali Faris · Accepted Answer · 2018-01-27 13:53:14Z

4

add second condition to your render method in Content component to check if button is clicked and load Matchinfo instead of the matches

render() {

    if (this.state.loading) {
        return <img src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif" />
    }
    else if(this.state.callmatchinfo){
        return <Matchinfo match_id={this.state.matchid} />
    }

    return (
        <div>
            <div className="row">
                {this.renderMatches()}
            </div>
            <div className="row">
                {this.state.callmatchinfo ? this.rendermatchinfo() : ''}
            </div>
        </div>
    );
}

answered Jan 27, 2018 at 13:53

Ali Faris

18.7k12 gold badges51 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

stone rock Over a year ago

Thank you so much. I had spent almost a day in figuring this out.

Ali Faris Over a year ago

I try to help as possible as I could , but you can ask here in SO there are a lot of people can help you more than I could

stone rock Over a year ago

As you said earlier use react-router I went through docs but they are mostly related to navbar links and all that stuff. Can I use react-router for event handling like onClick.

stone rock Over a year ago

Can you help me out here stackoverflow.com/questions/48545963/…

Collectives™ on Stack Overflow

How to render different view when onClick button in ReactJS?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related