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.

tuteehub community

Join Our Community Today

Ready to take your education and career to the next level? Register today and join our growing community of learners and professionals.

tuteehub community