How to make for loop on react-select?

Question

I making a select option using react-select following this Installation and usage example code.

There was an object of array to store the option like this:

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
];

Now, I want to make it dynamically to store the value from other data and make it iterate on the object.

like this:

const options = [
      { value: flavor, label: flavor },
    ];

The flavor on the value and the label are an array. Let's say the array was store the data like this:

flavor = ['chocolate', 'strawberry', 'vanilla']

So, whenever the array added new value, the object of array above also add the value on the iterate.

So, how to making iterate in that..?

or should I thinking to figure out in the component..?

<Select
  value={selectedOption}
  onChange={this.handleChange}
  options={options}
/>

EDIT: the result what I want are the object inside the array is added according to the array values, let's say if we have one data inside array, then the const options store data like this:

const options = [
      { value: flavor, label: flavor },
    ];

then if the array store 2 data, then the const options be like this:

const options = [
      { value: flavor, label: flavor },
      { value: flavor, label: flavor },
    ];

The purpose of this are for make dropdown options on the select have dynamically values.

stwilz · Accepted Answer · 2019-04-12 00:02:16Z

12

You can use an .map function to dynamically created your options :)

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';


const options = [
    { value: 'flavor', label: 'flavor' },
    { value: 'yummy', label: 'yummy' },
    { value: 'red', label: 'red' },
    { value: 'green', label: 'green' },
    { value: 'yellow', label: 'yellow' },
];

class App extends Component {
    state = {
        selectedOption: 'None',
    }

    handleChange = ({ target }) => {
        this.setState({
            selectedOption: target.value,
        });
    }

    render = () => (
        <div>
            <span>{this.state.selectedOption}</span>
            <select
            value={this.state.selectedOption}
            onChange={this.handleChange}
            >
            {options.map(({ value, label }, index) => <option value={value} >{label}</option>)}
            </select>
        </div>
    );
}

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

Working example here https://stackblitz.com/edit/react-select-example

edited Apr 12, 2019 at 0:02

answered Apr 11, 2019 at 23:50

stwilz

2,4172 gold badges23 silver badges26 bronze badges

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

3 Comments

stwilz Over a year ago

And to your question "or should I thinking to figure out in the component" the answer is yes. If you abstracted that into a component it would be scalable and easy to test.

Tri Over a year ago

I have figure out this, thanks for taking your time to answers my question :).

user6612182 Over a year ago

This answers implies the usage of the normal select component, but the question wanted a solution based upon the react-select library.

Tri · Accepted Answer · 2019-04-12 01:11:20Z

3

I have figure out this with following this answer, this is the answer what I want base on my questions:

const options = [];
    obj = {}

    for(var i = 0; i < flavor.length; i++) {
      var obj = {};

      obj['value'] = flavor[i];
      obj['label'] = flavor[i];
      options.push(obj);
    }

answered Apr 12, 2019 at 1:11

Tri

3,1096 gold badges43 silver badges73 bronze badges

Collectives™ on Stack Overflow

How to make for loop on react-select?

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related