React - Using a Callback function to pass data from Child to Parent - reactjs

Question

I am currently making a simple Dropdown menu in which I want to pass certain state values to its parent so that the parent will fetch data from the backend.
I have written a callback function in my parent function that I am passing as a prop to the child; however, I am not getting any output when I log the change on the console, hence I don't think I am using the callback properly.
This is my dropdown menu:
class Dropdown extends Component {
constructor(props) {
super(props);
this.state = {
headerTitle: this.props.title,
teams: this.props.teams,
};
this.handleClick = this.handleClick.bind(this)
}
handleClick(teamID) {
this.setState({
headerTitle: this.state.teams[teamID].name
})
}
render() {
return (
<div className="btn-group w-100 d-flex">
<button type="button" className="btn-success w-100 dropdown-toggle" data-toggle="dropdown" onChange={this.props.handleTeam}>
{this.state.headerTitle}
</button>
<ul className="dropdown-menu pre-scrollable w-100" role="menu">
{this.state.teams.map((team) => {
return (
<li>
<a href="#/game-pred" className="dropdown-item d-flex justify-content-center" onClick={() => this.handleClick(team.id)} >{team.name}</a>
</li>
);
})}
</ul>
</div>
);
}
}
And this is my parent:
class GamePrediction extends Component {
constructor(props){
super(props);
this.state = {
teams: [],
count: 0,
};
this.handleTitleChange = this.handleTitleChange.bind(this);
}
handleTitleChange(newTitle) {
if (this.state.count == 2){
this.setState({
teams: [newTitle,this.state.teams[1]]
})
}
else if (this.state.count == 1) {
this.setState({
teams: [this.state.teams[0],newTitle],
count: 2
})
}
else {
this.setState({
teams: teams.push(newTitle),
count: this.state.count + 1
})
}
console.log("Change!",this.state.teams,this.state.count)
}
render() {
return (
<div className="button-group w-100 d-flex" >
<Dropdown title="Team 1" teams={teams} handleTeam={this.handleTitleChange} ref="team1"/>
<Dropdown title="Team 2" teams={teams} ref="team2"/>
</div>
);
}
}
It should also be noted that there are two dropdown menus from which the user can select one team for each dropdown, if that helps.

Answer 1

A <button> has an onClick, not an onChange,
so you probably want to change this
<button type="button" className="btn-success w-100 dropdown-toggle" data-toggle="dropdown" onChange={this.props.handleTeam}>
to this
<button type="button" className="btn-success w-100 dropdown-toggle" data-toggle="dropdown" onClick={this.props.handleTeam}>
Also I see that your handleTitleChange(newTitle) accepts a newTitle param, you can pass that param like this
<button type="button" className="btn-success w-100 dropdown-toggle" data-toggle="dropdown" onClick={() => this.props.handleTeam('My new Title')}>