(REACT) HowTo Create Dynamic Select Option List from Array

Question

So, I wish to create, what the end result would be is, a dynamically built select options list in a .js file, generated from an array list, as depicted between the 'options' part of the code below. How do I do this?:

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>
    );
  }

}

Hosar · Accepted Answer · 2016-11-28 20:36:26Z

2

You can set the options in the array and iterate over it.
e.g.

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>
        );
    };

answered Nov 28, 2016 at 20:36

Hosar

5,3224 gold badges30 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

TheoG · Accepted Answer · 2016-11-29 19:16:08Z

1

So, upon further investigation, the solution to my question is as follows:

// 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}
/>

edited Nov 29, 2016 at 19:16

answered Nov 29, 2016 at 17:56

TheoG

1,5584 gold badges32 silver badges54 bronze badges

Collectives™ on Stack Overflow

(REACT) HowTo Create Dynamic Select Option List from Array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related