How I can pass a state obtain for a onchange select and pass it like a parameter in a another component using fetch api

Bryanrojas — Tue, 24 Sep 2019 16:12:45 +0000

//this is my component Formulario where I obtain idDepartamento using a onchange event

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;

/// and here is where I want to pass idDepartamento like parameter using fetch api
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 (

{provinciaItems}

)
}

}

export default Provincia;

DEV Community: Bryanrojas

How I can pass a state obtain for a onchange select and pass it like a parameter in a another component using fetch api