Reloading Children Upon Database Change with React - sql

Question

I am still a major React beginner (self-learning) and can't seem to figure out how to reload a component's child elements when the database changes. Right now my set-up goes by the following image:
Component Layout Example.
I have three components contained in one larger component called Contact. The first component within Contact sits on top and is called SendAMessage, then there are two sitting underneath it called LeaveAComment and FetchComments (called CommentList in the image, but FetchComments in the actual code); LeaveAComment and FetchComments are both next to each other.
Right now FetchComments displays all comments contained in the database and LeaveAComment adds to the database. The problem is that the FetchComments component does not display any new comments that are created by the LeaveAComment component unless the tab is refreshed or navigated away from. I need help with trying to figure out a way to reload the displayed comment list contained in FetchComments with every database update. Or if there is a way to reload the FetchComments children from the 'Submit' button on LeaveAComment.
So far I understand that a parent component may pass props to a child component, but not necessarily the other way around; since LeaveAComment and FetchAComment are siblings, I am not sure what to do. Any help would be much appreciated. Here is the code I have so far:
export class LeaveAComment extends Component {
constructor(props) {
super(props);
this.state = {
name: "",
comment: "",
date: ""
}
this.onChangeName = this.onChangeName.bind(this);
this.onChangeComment = this.onChangeComment.bind(this);
this.onSubmit = this.onSubmit.bind(this);
}
onChangeName(e) {
this.setState({
name: e.target.value
})
}
onChangeComment(e) {
this.setState({
comment: e.target.value
})
}
onSubmit(e) {
e.preventDefault();
console.log(`The values are ${this.state.name}, ${this.state.comment}, and ${this.state.date}`);
var data = new FormData(e.target);
//console.log(data)
fetch("api/Comment", {
method: 'POST',
body: data
})
// Clear input boxes
this.setState({
name: "",
comment: "",
date: ""
})
// Re-load FetchComments.js here?
}
render() {
return (
<div>
<header>
<h2> Leave A Comment </h2>
</header>
<form
onSubmit={this.onSubmit}
method="POST">
<label> Name: </label>
<input
name= "name"
className="form-control" value=''
value={this.state.name}
onChange={this.onChangeName}/>
<br />
<label> Comment: </label>
<input
name="comment"
className="form-control"
value={this.state.comment}
onChange={this.onChangeComment}/>
<br />
<div
name="date"
className="form-control"
value={new Date().getDate()}
hidden>
</div>
<input type="submit" value="Submit" className="btn btn-primary" />
</form>
</div>
);
}
}
export class FetchComments extends Component {
constructor() {
super();
this.state = {
loading: true,
commentList: []
};
}
componentDidMount() {
fetch('api/Comment')
.then(res => res.json())
.then(cl => this.setState({ loading: false, commentList: cl },
() => console.log("successfully fetched all comments", cl)))
}
renderCommentTable() {
return (
< div className = "container" >
<div className="panel panel-default p50 uth-panel">
<table className="table table-hover">
<thead>
<tr>
<th> Name </th>
<th> Comment </th>
<th> Time Stamp </th>
</tr>
</thead>
<tbody>
{this.state.commentList.map(c =>
<tr key={c.id}>
<td>{c.name} </td>
<td>{c.comment}</td>
<td> {new Intl.DateTimeFormat('en-US').format(c.comentDate)} </td>
</tr>
)}
</tbody>
</table>
</div>
</div >
)
}
render() {
let contents = this.state.loading ? <p> <img src="/Icons/LoadingPaopu.gif" alt="Loading Paopu Icon" /> </p>
: this.renderCommentTable(this.state.commentList);
return (
<div>
<h2> Comment List </h2>
{contents}
</div>
);
}
}