Onclick button I want to render multiple components in ReactJS?

Question

I have made Matchinfo component and Navbar component. When I click on view stats button it should render Navbar(so that we can navigate back to home page and vice-versa) and Matchinfo component.

Content.js :

import React, { Component } from 'react';
import './content.css';

class Content extends Component {
    constructor(props){
        super(props);
        this.state = {
            matches:[],
            loading:true
        };
    }

    componentDidMount(){
        fetch('api/matches')
        .then(res => res.json())
        .then(res => {
      console.log(res)
      this.setState({
        matches:res.slice(0,16),
        loading:false
      })
    })
    }

    renderMatches() {
        return this.state.matches.map(match => {
            return (
                <div class="col-lg-3">
                    <div id="content">
                        <p class="match">MATCH {match.id}</p>
                        <h4>{match.team1}</h4>
                        <p>VS</p>
                        <h4>{match.team2}</h4>
                        <div class="winner">
                            <h3>WINNER</h3>
                            <h4>{match.winner}</h4>
                        </div>
                        <div class="stats">
        Button --->                    <button type="button" class="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 class="row">
            {this.renderMatches()}
          </div>


      </div>
    );
  }
}

export default Content;

On button click it should render 2 different components how can I do that ?

see below component which must be rendered :

Navbar component:

import React, { Component } from 'react';

class Navbar extends Component {

  render() {
    return (
      <div>
          <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <div class="navbar-header">
                  <a class="navbar-brand" href="#">Cricket App</a>
                </div>
                <ul class="nav navbar-nav">
                  <li><a href="#">Home</a></li>
                </ul>
            </div>
          </nav>
      </div>
    );
  }
}

export default Navbar;

Matchinfo component:

import React, { Component } from 'react';

class Matchinfo extends Component {
    constructor(props){
        super(props);
        this.state = {
            info:[],
            loading:true
        };
    }

    componentDidMount(){
        fetch('api/match/: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" />
    }

    const {info} = this.state;

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

      </div>
    );
  }
}

export default Matchinfo;

Screenshot for more clarification see view stats button (green button):

Hemadri Dasari · Accepted Answer · 2018-01-26 14:22:43Z

I dont think you need to call route for MatchInfo from app.js. Check below updated code. You will see navbar in your page when you click on view stats if you my suggested code in previous post. It should work

The flow here is your content component displays view stats so within content I am calling MaTchInfo component by passing matchId as props and MatchInfo component passing that matchId to fetch api call in componentDidMount. Thats all.

import React, { Component } from 'react';
import './content.css';
import MatchInfo './components/MatchInfo'

class Content extends Component {
    constructor(props){
        super(props);
        this.state = {
            matches:[],
            loading:true,
            callMatchInfo: false,
            matchId: ''
        };
        this.viwStats = this.viwStats.bind(this);
    }

    componentDidMount(){
        fetch('api/matches')
        .then(res => res.json())
        .then(res => {
      console.log(res)
      this.setState({
        matches:res.slice(0,16),
        loading:false
      })
    })
    }

    viwStats(matchId){
      this.setState({
        callMatchInfo: true,
        matchId: matchId 
      })
    }

    renderMatchInfo(){
      <MatchInfo matchId={this.state.matchId} />
    }

    renderMatches() {
        return this.state.matches.map(match => {
            return (
                <div class="col-lg-3">
                    <div id="content">
                        <p class="match">MATCH {match.id}</p>
                        <h4>{match.team1}</h4>
                        <p>VS</p>
                        <h4>{match.team2}</h4>
                        <div class="winner">
                            <h3>WINNER</h3>
                            <h4>{match.winner}</h4>
                        </div>
                        <div class="stats">
                          <button type="button" onClick={this.viwStats(match.id)} class="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 class="row">
            {this.renderMatches()}
          </div>
          <div class="row">
            {this.state.callMatchInfo ? this.renderMatchInfo() : ''}
          </div>

      </div>
    );
  }
}

export default Content;

AND in your Matchinfo component: this.props.matchId as request param in fetch call

componentDidMount(){
        fetch(`api/match/${this.props.matchId}`)
        .then(res => res.json())
        .then(res => {
      console.log(res)
      this.setState({
        info:res,
        loading:false
      })
    })
    }

Collectives™ on Stack Overflow

Onclick button I want to render multiple components in ReactJS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related