created dropdown that fetches data from an api but now i want to send the selected item in dropdown to the database. How to do that?

General Tech Bugs & Fixes 2 years ago

0 1 0 0 0 tuteeHUB earn credit +10 pts

5 Star Rating 1 Rating

Posted on 16 Aug 2022, this text provides information on Bugs & Fixes related to General Tech. Please note that while accuracy is prioritized, the data presented might not be entirely correct or up-to-date. This information is offered for general knowledge and informational purposes only, and should not be considered as a substitute for professional advice.

Take Quiz To Earn Credits!

Turn Your Knowledge into Earnings.

tuteehub_quiz

Answers (1)

Post Answer
profilepic.png
manpreet Tuteehub forum best answer Best Answer 2 years ago

 

I tried to fetch the data and store in a state and then when i select one of the options in dropdown i wasn't able to store that in a variable and send it back to database on the click of submit button. Can anyone can help me how to do that ?

  //fetches the data from an api and maps to dropdown
componentDidMount() {
 let initialPlanets = [];
  fetch('http://b0499a61.ngrok.io/api/assetType')
     .then(response => {
        return response.json();
    }).then(data => {
    initialPlanets = data.map((planet) => {
        return planet
    });
    console.log(initialPlanets);
    this.setState({
        planets: initialPlanets,
    });
});
}

 render() {
         return (
             <div id="react-search">
             <Options state={this.state}/>
             div>
     )
    }
 }

    //mapping with dropdown
        let planets = this.props.state.planets;
         let optionItems = planets.map((planet) =>
            <option key={planet.asset_type}>{planet.asset_type} 
    option>
            );
       return (
        <div>
          <select>
            {optionItems}
            select>
       div>
        )
       }
     }

  //here need to store the selected dropdown data in a variable
 class Requestbutton extends React.Component {
 constructor(props) {
 super(props);

this.state = {
  items:[],
  emp_id:'',
  asset_type: "",
  comments_emp: ""
};

 onChange(e) { 
 this.setState({
  [e.target.name] : e.target.value });
 }

  componentDidMount(){
  var p_id=localStorage.getItem('id')
   fetch(`http://b0499a61.ngrok.io/api/employee/${p_id}`)
  .then(res => res.json())
  .then(json => {
    this
                                                
                                                
0 views
0 shares

No matter what stage you're at in your education or career, TuteeHub will help you reach the next level that you're aiming for. Simply,Choose a subject/topic and get started in self-paced practice sessions to improve your knowledge and scores.