如何在渲染函数中附加下拉选项？

Question

below is my code. console.log of this.Resources result is shown below

1:"Basavaraj" 2:"Ashuthosh" 3:"Sravan" 4:"Raghavendra" 5:"Prem kumar" 6:"Simran" 7:"Namratha" 8:"Ghanashri" 9:"Ravindra" 10:"Anand" 11:"Shaeen"

render() {

 console.log(this.Resources);
 const options = this.Resources.map((item, index) =>{
 <option key={index} value={item}>{item}</option>
 });

  return (
    <div>
    <form>
    <div id="select">
    <div className="container select">
    <div  className="row">
      <select  className="col-4 selectpicker input-large">
        <option value="" disabled selected>Select resouce</option>
        {options}
      </select>

I want all data in this.Resources should come in select drop down options.

Thanks in advance

Answer 1

You are not returning the html in map.Need to return it.

const options = this
  .Resources
  .map((item, index) => {
    return (
      <option key={index} value={item}>{item}</option>
    );
  });

OR

ECMA6 arrow notation with default return:

const options = this
  .Resources
  .map((item, index) => (
    <option key={index} value={item}>{item}</option>
  ));