Hi I have this component structure:
<ScheduleApp />
<ScheduleForm />
<TeamField />
ScheduleApp
ScheduleForm
TeamField
ScheduleApp
No. of Teams
Team Name
onChange
You are pushing the current content of text box into the array on every change/keystroke. Instead what you should do is text box 1 should only modify the first index in your array. And text box 2 should only modify second field in your array and so on. On each change, replace entire content with new content.
Or a cleaner approach would be to store a teams object. And send a team number field too in the on change handler against which you can store the team name.
<input className="form-control" type="text" ref="teamName"
onChange={this.handleChange.bind(null, 'team1')} /> // pass any index or string instead of team1
...
handleChange(teamIndex, teamName) {
let { teams } = this.state;
teams[teamIndex] = teamName;
this.setState({teams: teams};
}