List rendering with array.map() - React

加入JSX，結合原生JavaScript語法

getInitialState() {
        return {
            details: {
                tw: {
                    form: [
                        { name: 'coutry', type: 1, des: '國家', ans:  ['區域獨家代理', '代理']  },
                        { name: 'mode', type: 2, des: '模式', ans: ['區域獨家代理', '代理'] },
                        { name: 'state', type: 4, des: '洲別', ans: ['美洲', '亞洲', '歐洲'] },
                    ],
                },
            },
        };
    },
    render() {        
        return (
          <div>
            <ul className="form">
              {this.state.details[this.props.langVal].form.map((item, key) => {               
               switch(item.type){
                   case 1:
                   return (
                        <li key={key} ><input type="text" placeholder={item.des} /></li>
                      );
                   break;                   
                   case 2:
                   return (
                        <li key={key} >
                            <input type="text" placeholder={item.des} />
                            <select name="">
                            {
                                item.ans.map(function(value, index){
                                    return (
                                        <option value={index}>{value}</option>
                                    )
                                })
                            }
                            </select> 
                        </li>
                      );
                   break;
               }                  
              })}
            </ul>
          </div>
        );
    },

---

一個JSX的語法糖裡，只能做一次return （不確定）
做第二次array.map()時，必須先包一層HTML Tag （不確定）