Cómo pasar un state como parametro usando fecth api
Publicado por Bryan (1 intervención) el 24/09/2019 18:05:53
este es mi componente formulario
y aca es donde quiero pasar como parametro el idDepartamento para obtener una lista de Provincia dinamicante
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
import React, { Component } from 'react';
import Provincia from './Provincia.js'
class Formulario extends Component {
constructor(props) {
super(props);
this.state = {departamento:[],idDepartamento:null };
this.handleChangeDepartment = this.handleChangeDepartment.bind(this);
// this.handleSubmit = this.handleSubmit.bind(this);
}
handleChangeDepartment=(event)=> {
this.setState({idDepartamento: event.target.value});
alert(this.state.idDepartamento)
}
componentDidMount() {
fetch("http://10.85.110.6:81/api/Departamento")
.then(res => res.json())
.then((data) => {
this.setState({ departamento : data })
console.log(data)
})
}
render () {
const {departamento,idDepartamento,provincia}=this.state;
let optionItems = departamento.map((departamento) =>
<option key={departamento.idDepartamento} value={departamento.idDepartamento}>{departamento.descripcion}</option>
);
return (
<div>
<form onSubmit={this.handleSubmit}>
<select onChange={this.handleChangeDepartment}>
{optionItems}
</select>
<Provincia />
</form >
</div>
)
}
}
export default Formulario;
y aca es donde quiero pasar como parametro el idDepartamento para obtener una lista de Provincia dinamicante
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
import React, { Component } from 'react';
import Formulario from './Formulario.js'
const tournyAPI="http://10.85.110.6:81/api/Provincia?idDepartamento=4";
class Provincia extends Component {
constructor(props) {
super(props);
this.state = {provincia:[],idDepartamento:props.id,idProvincia:'',departamento:[] };
this.handleChangeDepartment = this.handleChangeDepartment.bind(this);
// this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event){
this.setState({idProvincia: event.target.idProvincia});
console.log(event.target.idProvincia);
}
componentDidMount() {
const abc=this.handleChangeFormulario();
fetch(tournyAPI+abc)
.then(res => res.json())
.then((data) => {
this.setState({ departamento : data })
console.log(data)
})
}
render(){
const {departamento,idDepartamento,provincia}=this.state;
let provinciaItems = provincia.map((provincia) =>
<option key={provincia.idDepartamento} value={provincia.idDepartamento}>{provincia.descripcion}</option>
);
return (
<div>
{provinciaItems}
</div>
)
}
}
export default Provincia;
Valora esta pregunta


0