render option in select failed

Question

What's wrong with doing this

    <option key={this.props.floors} value={this.props.floors.floor_id}>
        {this.props.floors.name}
    </option>

This is my data

[{
    "floor_id": "1",
    "name": "UG"
}, {
    "floor_id": "2",
    "name": "G"
}, {
    "floor_id": "3",
    "name": "LG"
}]

I didn't see any option been population in my dropdown.

Answer 1

Floors is an array which contains the option data, in order to create the ui from this array, you need to use any loop to iterate the array, Check this example by using map:

var floors = [{
    "floor_id": "1",
    "name": "UG"
}, {
    "floor_id": "2",
    "name": "G"
}, {
    "floor_id": "3",
    "name": "LG"
}]

class App extends React.Component{

   render(){
      return <select>
                 {
                    this.props.floors.map(floor => <option key={floor.floor_id} value={floor.floor_id}>
                                                      {floor.name}
                                                   </option>)
                 }
             </select>
   }

}

ReactDOM.render(<App floors = {floors}/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

Answer 2

You need to map over the props and retun the option field like

<select>
{
    this.props.floors.map((item) => {
         return (
              <option key={item.floor_id} value={item.floor_id}>
        {item.name}
    </option>
         )
     })
}
</select>

sample snippet

class App extends React.Component {

    render() {
        var floors = [{
    "floor_id": "1",
    "name": "UG"
}, {
    "floor_id": "2",
    "name": "G"
}, {
    "floor_id": "3",
    "name": "LG"
}]
        return (
        <select>
            {
                floors.map((item) => {
                     return (
                          <option key={item.floor_id} value={item.floor_id}>
                    {item.name}
                </option>
                     )
                 })
            }
            </select>
        )

    }

}

ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>