Onclick button I want to render multiple components in ReactJS? - 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>Home</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):

Answer 1

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
})
})
}