Call a method from Child to Child - reactjs

Question

I would like to know if there's a way to call a method from a child to another child? For instance, the user clicks on "Most Recent" head table. Then props.func is called and is bound with "rearangeList" method. But it stops right there and cannot reach the method "content" in TableContent. Is anyone could tell me what is wrong?
//Get the users API leaderboard
function ajaxCall(callback){
$.getJSON("https://fcctop100.herokuapp.com/api/fccusers/top/recent", function(json30){
$.getJSON("https://fcctop100.herokuapp.com/api/fccusers/top/alltime", function(jsonAll){
json30.forEach(function(j30){
var i = 0;
jsonAll.forEach(function(jAll) {
i++;
if(jAll.username == j30.username) {i = 0; return false;}
else if(i == jsonAll.length) {
// Join json that is not appeared in the json alltime score
jsonAll = jsonAll.concat([
{
"username": j30["username"],
"img": j30["img"],
"alltime": j30["alltime"],
"recent": j30["recent"],
"lastUpdate": j30["lastUpdate"]
}
]);
};
});
});
callback(jsonAll);
});
});
}
ajaxCall(function(jsonAll) {
class LeaderBoard extends React.Component {
//call method from TableContent
rearangeList(title){this.child.content(title)}
render() {
return (
<div className="container">
<table>
<thead>
<tr>
<th>
User
</th>
<TableHead func={this.rearangeList} titleHead="Most Recent"/>
<TableHead func={this.rearangeList} titleHead="All Time"/>
</tr>
</thead>
<TableContent onRef={ref => (this.child = ref)} />
</table>
</div>
);
}
}
class TableContent extends React.Component {
componentDidMount(){
this.props.onRef(this);
}
componentWillUnmount() {
this.props.onRef(null)
}
content(title = null) {
var constr = "";
var i = 1;
console.log(title)
jsonAll.forEach(function(el){
constr += "<tr>" +
"<td class='user'>"+
"<img class='avatar' src='"+ el.img+"' alt='avatar'/>" +
"<span class='user-tag'>" + el.username +"</span>"+
"</td>"+
"<td class='number'>"+ el.recent +"</td>" +
"<td class='number'>"+ el.alltime + "</td>" +
"</tr>" ;
i++;
});
return constr;
}
render() {
return (
<tbody dangerouslySetInnerHTML={{ __html: this.content() }}>
</tbody>
);
}
}
class TableHead extends React.Component {
constructor() {
super();
this.state = {
carret: "pd fas fa-angle-up fa-sm"
}
this.carretUp = "pd fas fa-angle-up fa-sm";
this.carretDown = "pd fas fa-angle-down fa-sm";
}
toggleCarret(carret, title) {
if(carret == this.carretUp) {
this.setState({carret: this.carretDown});
} else if(carret == this.carretDown) {
this.setState({carret: this.carretUp});
}
this.props.func(title);
}
render() {
return (
<th className="btn noselect" onClick={() => this.toggleCarret(this.state.carret, this.props.titleHead)}>
{this.props.titleHead}<i className={this.state.carret}></i>
</th>
);
}
}
const app = document.getElementById("app");
ReactDOM.render(<LeaderBoard/>, app);
});
The link to the codepen. It works perfectly except when the user clicks on the column title to order by the Highest or the lowest value.
https://codepen.io/dancinoman/pen/VQRWrM

Answer 1

The React way to do this is to pass a callback method from the parent to each child. The child then calls the callback which causes the parent to update its state and trigger a render cycle. During the render cycle the new state is passed down to the children as usual.