In the UI of my app there are 2 lists and a form.
A list is a team with no points awarded and the other list is the scores of teams already loaded.
Each list is filled with information from their respective methods of my own Rest API.
The form receives a team_id and a score and the idea is that when you click on the button, the team in question disappears from the first list and appears in the second.
Bearing in mind that the responses of the api are going to stop at different states of the component ( this.state.updatedTeams , this.state.nonUpdatedTeams ), how do I pass an item from one state to the other once I submit the form? / p>
This is the code of my component:
class App extends Component {
constructor(props){
super(props)
this.fetchUpdatedTeams = this.fetchUpdatedTeams.bind(this);
this.fetchNonUpdatedTeams = this.fetchNonUpdatedTeams.bind(this);
this.state= {
nonUpdatedTeams : [
],
updatedTeams : [
],
eventId : 1,
category_id: 1,
}
}
componentDidMount() {
this.fetchNonUpdatedTeams();/* fetch API in action */
}
fetchNonUpdatedTeams() {
fetch('/api/event/'+this.state.eventId)
.then(response => {
return response.json();
})
.then(teams => {
let teamsArray = teams;
this.fetchUpdatedTeams();
//Fetched product is stored in the state
this.setState({ nonUpdatedTeams : teamsArray });
});
}
fetchUpdatedTeams() {
fetch('/api/event/'+this.state.eventId + '/scores')
.then(response => {
return response.json();
})
.then(eventResults => {
let teamsArray = eventResults
this.setState({ updatedTeams : teamsArray });
});
}
setScore(team_id, score) {
const teamScore = {
team_id,
score
}
let team = this.state.nonUpdatedTeams.find((aTeam)=> aTeam.id == team_id);
const url = '/api/event/' + this.state.eventId+'/cargarScore/'
axios.post(url,teamScore)
.then(function(response) {
console.log(response);
})
.catch(function(error) {
console.log(error);
});;
console.log(team)
this.fetchNonUpdatedTeams()
this.fetchUpdatedTeams()
}
render() {
let nonUpdatedTeams = this.state.nonUpdatedTeams
let updatedTeams = this.state.updatedTeams
updatedTeams = updatedTeams.sort(function(a, b){return a.score - b.score})
return (
<div className="App">
<header className="App-header">
<h1 className="App-title">Cargar Resultados</h1>
</header>
<Jumbotron>
<h3>Evento: -id del Evento-</h3>
<Form update={this.setScore.bind(this)}/>
</Jumbotron>
<Col className="column" md={6} sm={6}>
<List entries={nonUpdatedTeams}/>
</Col>
<Col className="column" md={6} sm={6}>
<List entries={updatedTeams}/>
</Col>
</div>
);
}
}
export default App;
const rootDiv = document.getElementById('root');
ReactDOM.render(<App />, rootDiv );<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>