Get child components to talk to eachother - reactjs

Question

I know this has been asked before however I've been playing around with this for awhile and I'm not getting it. I have two child components being used and connected by parent page. The first child component is a form and the second child component is a table containing a list of all the userProfiles. When I submit the form, I wand to tell the table component to run a function. How do I do this?
Path: Parent Component
export default class StudentPage extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return (
<div>
<AddStudentForm
guardianUserProfiles={this.props.guardianUserProfiles}
/>
<StudentTable
studentUserProfiles={this.props.studentUserProfiles}
/>
</div>
);
}
}
Path: AddStudentForm
export default class AddStudentForm extends React.Component {
constructor(props) {
super(props);
this.state = {
};
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event) {
event.preventDefault();
}
render() {
return (
<Form onSubmit={this.handleSubmit} className="mb-3">
<Input
type="text"
name="firstName"
value={this.state.firstName}
onChange={this.handleInputChange}
id="firstName"
placeholder="First name"
/>
<button type="submit" className="btn btn-primary">Save</button>
</Form>
);
}
}
Path: StudentTable
export default class StudentTable extends React.Component {
constructor(props) {
super(props);
this.state = {
};
this.handleTableUpdate = this.handleTableUpdate.bind(this);
}
handleTableUpdate = () => (event) => {
// Do stuff
}
render() {
return (
<div>
<Table hover bordered responsive>
<thead>
<tr>
<th className="border-left border-top-0 border-right-0 pt-0">#</th>
<th className="border-left-0 border-top-0 border-right-0 pt-0">First name</th>
</tr>
</thead>
<tbody>
{this.state.userProfile.map((studentUserProfile, idx) => (
<tr>
<React.Fragment>
<th rowSpan={studentUserProfile.classes.length} className="border-left aling-double-row">{idx + 1}</th>
<td rowSpan={studentUserProfile.classes.length} className="aling-double-row">{studentUserProfile.firstName}</td>
</React.Fragment>
</tr>
))}
</tbody>
</Table>
</div>
);
}
}

Answer 1

Way 1:
You can achieve this either by using flux or redux
Way 2:
You can send a call back form child1(ie page with form) to parent and send it as a prop from parent to child2(ie page with table).