React JSの選択メニューのデフォルト値

Question

ここに私の簡単な選択メニューのコンポーネントがあります。

質問：生成された選択メニューのデフォルト値として最初にitem.id（jsonレスポンスから）を設定するにはどうすればよいですか？

コード：

import React from 'react' 
import axios from 'axios' 

const Handler = React.createClass({ 

    loadFromServer : function() { 
     axios({ 
      method: 'get', 
      url: '/api_url' 
     }) 
     .then(function(response) { 
      this.setState({data: response.data}); 
     }.bind(this)) 
     .catch(function(response) { 
      this.setState({error: true}) 
     }.bind(this)); 
    }, 

    getInitialState() { 
     return { 
      data: [] 
     } 
    }, 

    componentDidMount: function() { 
     this.loadFromServer(); 
     }, 

    render() { 
    var {data} = this.state; 
    return (
     <select ref="select" id="select"> 
      {data.map((item, i) => { 
       return <option value={item.id} key={i}>{item.name}</option> 
      })} 
     </select> 
    ) 
    } 
}); 

export default Handler 

JSON：

[{id: 'item_id', name: 'item_name'},{id: 'item_id_2', name: 'item_name_2'}] 

Answer 1

あなたはselectタグにvalue属性を設定することができます（お使いの場合には、この属性の値は、最初の項目のIDに設定する必要があります）：

<select ref="select" id="select" value="data[0].id"> 
      {data.map((item, i) => { 
       return <option value={item.id} key={i}>{item.name}</option> 
      })} 
    </select> 

詳しくはReact docsをご覧ください。