（REACT）アレイから動的選択オプションリストを作成する方法

Question

最終的な結果は、間に描かれているように、配列リストから生成された.jsファイル内に動的に作成される選択肢リストを作成したいと考えています。以下のコードの「オプション」部分。私はこの？：

const kvArray = [ 
 
    {children: 'Country List', value: 0}, 
 
    {children: 'France', value: 10}, 
 
    {children: 'England', value: 20}, 
 
    {children: 'Peru', value: 30} 
 
].map ((keySelect, index) => ({ 
 
    id: index, 
 
    name: keySelect, 
 
})); 
 

 
class FieldsPage extends React.Component { 
 

 
    onFormSubmit =() => { 
 
    const { dynamicFields, fields } = this.props; 
 

 
    const values = { 
 
     ...fields.$values(), 
 
     concepts: { 
 
     ...dynamicFields, 
 
     }, 
 
    }; 
 
    } 
 

 
    render() { 
 
    const { fields } = this.props; 
 
    const { disabled, error, submittedValues, selectValue } = this.state; 
 
    
 
    return (
 
     <View> 
 
     <Form onSubmit={this.onFormSubmit}> 
 
      <Block> 
 
      <Select 
 
       {...fields.donation} 
 
       disabled={disabled} 
 
       label="Donation" 
 
       options={[ 
 
       // What I want to happen here: build selection options by iterating through item, i.e. 
 
       {kvArray.map(item => 
 
        { children: item.name.children, value: item.name.value}, 
 
       )} 
 

 
       ]} 
 
      /> 
 
      </Block> 
 
      <Button disabled={disabled} type="submit"> 
 
      <FormattedMessage {...buttonsMessages.submit} /> 
 
      </Button> 
 

 
     </Form> 
 
     </View> 
 
    ); 
 
    } 
 

 
}

Answer 1

をどのように行うのですかあなたは、配列内のオプションを設定し、それを反復処理することができます。

setFruits(){ 
     const fruits = [<option key={1} value="grapefruit">Grapefruit</option>,<option key={2} value="lime">Lime</option>,<option key={3} value="coconut">Coconut</option>,<option key={4} value="mango">Mango</option>]; 
     this.setState({fruits:fruits}); 

    } 
render() { 

     return (
      <div> 
       <select> 
        {this.state.fruits} 
       </select>     
      </div> 
     ); 
    }; 

Answer 2

次のように、さらに調査すると、私の質問を解決するには、次のとおりです。

// Proof of concept. Country list will be read from firebase 
 
const countryArray = [ 
 
    { label: 'Select Country', value: 0 }, 
 
    { label: 'France', value: 2 }, 
 
    { label: 'England', value: 4 }, 
 
    { label: 'Swizterland', value: 8 }, 
 
    { label: 'Germany', value: 16 }, 
 
    { label: 'Lithuania', value: 32 }, 
 
    { label: 'Romania', value: 64 } 
 
].map ((countryName, index) => ({ 
 
    id: index, 
 
    name: countryName, 
 
})); 
 

 
// Dynamically create select list 
 
let options = []; 
 
countryArray.map(item => 
 
    options.push({ label: item.name.label, value: item.name.value }), 
 
); 
 

 
<Select 
 
    {...fields.donation} 
 
    disabled={disabled} 
 
    label="Countries" 
 
    onChange={this.selectCity} 
 
    options={options} 
 
/>