React how to update component when new input is added - reactjs

Question

I have a react component in which a user can add teams and then players to these teams. I use react fetch for posting and getting the data from the database. My question is, how can I automatically update the component to show the newly added teams by the user? Currently I have to manually refresh to see changes.
Do I have to add another function to the button onClick to refresh the whole page or is there a better method in react to just refresh the component?
My render looks like this:
render() {
return (
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="jumbotron text-center">
<form>
<label for="teamName">Team name</label>
<input type="text" class="form-control" id="teamName"></input>
<button type="submit" onClick={this.addTeams} class="btn btn-primary">Submit</button>
</form>
<br></br>
Registered teams:
<br></br>
{
this.state.data.map((dynamicData, key) =>
<div class="black" id="panels">
<PanelGroup accordion id="accordion"
activeKey={this.state.activeKey}
onSelect={this.handleSelect}>
<Panel bsStyle="primary" eventKey={dynamicData.id}>
<Panel.Heading>
<Panel.Title toggle onClick={() => this.showPlayers(key)}>{dynamicData.name} <i class="fas fa-angle-down"></i></Panel.Title>
</Panel.Heading>
<Panel.Body collapsible>Add players</Panel.Body>
<Panel.Body collapsible>
<div id="dynamicInput">
<input type="text" class="bottomroom" placeholder="Player name" id={"playerName"+key}></input>
<input type="text" class="bottomroom" placeholder="Player number" id={"pnr"+key}></input>
<input type="hidden" class="bottomroom" id={"teamId"+key} value={dynamicData.id}></input>
{this.state.players.map((playersData, key) =>
<p>{playersData.name}</p>
)}
</div>
<br></br>
<button type="submit" onClick={() => this.addPlayers(key)} class="btn btn-success button"><i class="fas fa-check-circle"></i></button>
</Panel.Body>
</Panel>
</PanelGroup>
</div>
)
}
</div>
</div>
</div>
</div>
);
}