DropDown menu is not showing values of the passed array

user_9438103 0
Viewed 1238

The values of skillList is not showing in the drop down.it shows an empty dropdown.(the data fetched from api is pushed into the skillList array without any issue)

 import React, { Component } from 'react'
 let skillList = [];
 export class DataCheck extends Component {

     constructor(props) {
         super(props)

         this.state = {
             skill: "",
             skillId: "",
         }
        this. handleSkillChange=this. handleSkillChange.bind(this);

     }
     componentDidMount() {
    // worker skill selection

         fetch("http://localhost:3001/dataservices/getallskills")
         .then (res=>res.json())
         .then(res => {
          console.log(res);
            let temArray = {};
            for (let i = 0; i < res.recordsets[0].length; i++) {
               temArray["value"] = res.recordsets[0][i].SkillId;
               temArray["label"] = res.recordsets[0][i].SkillTitle;
               skillList.push(temArray);
               console.log(skillList);
               temArray = {};
              }
             })
            .catch(function(error) {
            console.log(error);
            });
          }

       handleSkillChange(skill) {
        this.setState({
         skill: skill,
         skillId: skill.value
         });
       }

    render() {
         return (
            <div>

                 <form>
                <select
                      value={this.state.skill}
                      onChange={this.handleSkillChange}
                      options={skillList}
                      placeholder="Skills"
                       />

                   </form>
                   </div>
             )
         }
       }

  export default DataCheck


when I check the dev-tools, it shows like this:

  options:Array

         0:Object
           label:"wood works"
           value:6

(Array consists of 16 objects like this)

console says:

warning.js:36 Warning: Unknown prop options on tag. Remove this prop from the element.

reactjs drop-down-menu
2 Answers

Native select does not have an options props. You have to manually map the option tag:

<select
  value={this.state.skill}
  onChange={this.handleSkillChange}
  placeholder="Skills"
>
  {this.state.skillList.map((optionSkill) => (
    <option value={optionSkill.value}>{optionSkill.label}</option>
  )}
</select>

Currently you have added skillList as a normal variable with module scope. Even though you have changed skillList, the same will not be reflected in the UI because React does not detect this change. you will have to change skillList to a state variable for React.

this.state = {
  skill: "",
  skillId: "",
  skillList: []
}

fetch("http://localhost:3001/dataservices/getallskills")
  .then (res=>res.json())
  .then(res => {
     this.setState({
       skillList: res.recordsets[0].map((recordSet) => ({
         label: recordSet.SkillTitle,
         value: recordSet.SkillId,
       }))
     });       
  });
user_43745660

You have to add option tag inside select. Loop array of items using .map and you will get your result. This codepen can help you to make this work, select example

Hope this can help you!

user_57432490
Related