Add Dropdown by getting data from another table in React with Rails

Add Drop Down by getting data from another table in React with Rails

.......................................................................................................................................

.......................................................................................................................................

Step 01 : Where we want to take standards,sections ,roll no or get the data from the backend api == This onChange will work at the text input                       

                                           onChange={this.handleChange}        ............................

.......................................................................................................................................

Step 02 : API made at the main page of react-front-end 

Now we will go in the handleSubmit(event) function ::

We take debugger in it and check its conditions 

We are adding axios in it : below is the syntax for the given route ::

        if (event.target.name == "standard_id"){
          axios.get(`${BASE_URL}standard/${value}`).then(response => {
            this.setState({all_sections_data: response.data.data.all_sections})
          })
        }
        if (event.target.name == "section_id"){
          axios.get(`${BASE_URL}section/${value}/standard/${this.state.admitcard.standard_id}`).then(response => {
            this.setState({all_sec_stand_students: response.data.data.all_sec_stand_students})
          })
         }  
        } 

.......................................................................................................................................

Step 03 : Make Route in the Back end for standards and sections:

.......................................................................................................................................

 

      get "/standard/:id" , to: 'standards#get_standard'
      get "/section/:section_id/standard/:standard_id" , to: 'standards#get_standard_section' 

We give the route in this route.rb according to we give the url in the frontend axios 

.......................................................................................................................................

 

Step 04 : Now this will come to controller method we make the method and add byebug, we check everything after sending the request and removing debudder from the browser.

.......................................................................................................................................

 

Step 05 : Define the data in the this.state also , we have beofre updated the data in the this.setState.

 

.......................................................................................................................................