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

//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;

Comments

[Sung M. Kim]

Hi Bryanrojas,

Could you format the code snippets (Refer to the Editor Guide - dev.to/p/editor_guide) and possibly a minimal runnable sample using sites like CodeSandBox or StackBllitz?

[Bryanrojas]

Hi,yes this is CodeSandBox codesandbox.io/s/dark-butterfly-swty8
can you help me with this issue, I want to pass like parameter the state of idDepartamento from my component Department to my component Provincia where i want to put in a fetch api like parameter dynamically.