React passing onClick value from one class to another - reactjs

Question

In Tournaments.js I have a list of Tournament names each with unique ID's which are fetched from an API. Now whenever I click on one of these tournament names, I get it's ID but I need to pass this ID to Template.js where I can fetch tournament data based on the Tournament ID that was clicked. I am trying to do something with passing props from child to parent but I am completely lost right now.
Tournament.js:
import React, { Component } from "react";
import Template from './template';
const API = 'http://localhost:8080/api/tournaments';
class Tournaments extends Component {
constructor() {
super();
this.state = {
data: []
}
}
componentDidMount() {
fetch(API)
.then((Response) => Response.json())
.then((findresponse) => {
console.log(findresponse)
this.setState({
data:findresponse,
})
})
}
reply_click(event) {
var targetId = event.target.getAttribute('id');
console.log(targetId);
}
render() {
return(
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="jumbotron text-center">
{
this.state.data.map((dynamicData, key) =>
<div>
<a href={"/#/template"} id={dynamicData.id} onClick={this.reply_click}>{dynamicData.name}</a>
Edit</button>
<Template name={dynamicData.id}></Template>
</div>
)
}
</div>
</div>
</div>
</div>
)
}
}
export default Tournaments;
Template.js:
import React, { Component } from "react";
import Parser from 'html-react-parser';
import Tournaments from "./Tournaments";
import './template.css';
import './index.css';
const tournyAPI = 'http://localhost:8080/api/tournaments';
const teamAPI = 'http://localhost:8080/api/teams'
class template extends Component {
constructor() {
super();
this.state = {
data: [],
}
}
componentDidMount() {
fetch(tournyAPI)
.then((Response) => Response.json())
.then((findresponse) => {
this.setState({
tournydata:findresponse.filter(res => res.id === 18),
})
})
So basically my goal is to use targetID from Tournament.js in place of the '18' in the ComponentDidMount in Template.js

Answer 1

You should keep this value in the parent's component state and pass it as a prop to child.
When your onClick is fired you should update parents state so updated props will be passed to child.
Here is the code:
Tournament.js
import React, { Component } from "react";
import Template from './template';
const API = 'http://localhost:8080/api/tournaments';
class Tournaments extends Component {
constructor() {
super();
this.state = {
data: [],
targetId: null,
}
}
componentDidMount() {
fetch(API)
.then((Response) => Response.json())
.then((findresponse) => {
console.log(findresponse)
this.setState({
data:findresponse,
})
})
}
reply_click = id => {
return () => {
this.setState({ targetId: id })
}
}
render() {
return(
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="jumbotron text-center">
{
this.state.data.map((dynamicData, key) =>
<div>
<a href={"/#/template"} onClick={this.reply_click(dynamicData.id)}>{dynamicData.name}</a>
Edit</button>
<Template name={dynamicData.id} targetId={this.state.targetId}></Template>
</div>
)
}
</div>
</div>
</div>
</div>
)
}
}
export default Tournaments;
Template.js
import React, { Component } from "react";
import Parser from 'html-react-parser';
import Tournaments from "./Tournaments";
import './template.css';
import './index.css';
const tournyAPI = 'http://localhost:8080/api/tournaments';
const teamAPI = 'http://localhost:8080/api/teams'
class template extends Component {
constructor() {
super();
this.state = {
data: [],
}
}
componentDidMount() {
fetch(tournyAPI)
.then((Response) => Response.json())
.then((findresponse) => {
this.setState({
tournydata: findresponse.filter(res => res.id === this.props.targetId),
})
})
But do it using componentDidUpdate instead of componentDidMount if you want keep updated your Template component after every changing of targetId.
Like this:
Template.js
componentDidUpdate(prevProps) {
if (prevProps.targetId !== this.props.targetId) {
fetch(tournyAPI)
.then((Response) => Response.json())
.then((findresponse) => {
this.setState({
tournydata:findresponse.filter(res => res.id === this.props.targetId),
})
})
}
}
If you need to do it at once during first rendering just add check if targetId is not null in your Tournament component.
Something like this:
Tournament.js
render() {
...
{this.state.targetId ? <Template name={dynamicData.id} targetId={this.state.targetId}></Template> : null }
...
}

Answer 2

Add targetID to your parent state and pass as prop to child:
reply_click(event) {
var targetId = event.target.getAttribute('id');
this.setState({ targetID });
}
<Template targetID={this.state.targetID}
In Template you can access it with this.props.targetID.
You need to use componentDidUpdate though, see React Child component don't update when parent component's state update

Answer 3

In your example it's very easy as you are rendering <Template> in loop you can pass it as param
Problem 1
React purpose is not to manipulate dom like this var targetId = event.target.getAttribute('id') You have this id, why you are fetching it from DOM? Instead of that accept it as param
<a href={"/#/template"} id={dynamicData.id} onClick={(e) => this.reply_click(e, dynamicData.id)}>{dynamicData.name}</a>
and
reply_click(event, targetId) {
console.log(targetId);
}
Never ever query DOM in React. You will get mess and errors because of unmounted elements and etc. React uses JSDom (in memory) not Real DOM
Problem 2
Just pass it as param
and call setState inside reply_click
reply_click(event, targetId) {
console.log(targetId);
this.setState({targetID: targetId})
}