I am new to the react-js. here what I am trying to do is that,

Now what I have tried is that

const options = [
    { value: 'chocolate', label: 'Chocolate' },
    { value: 'strawberry', label: 'Strawberry' },
    { value: 'vanilla', label: 'Vanilla' }
];
handleChange = (selectedOption) => {
    this.setState({ selectedOption });
    console.log(`Option selected:`, selectedOption);
}
const { selectedOption } = this.state;

<div className="row" style={styles}>
    <div className="col-12 d-flex">
        <div className="col-md-4">
            <Select
            value={selectedOption}
            onChange={this.handleChange}
            options={options}
            />
        </div>
        <div className="col-md-4">
            <Select
            value={selectedOption}
            onChange={this.handleChange}
            options={options}
            />
        </div>
        <div className="col-md-4">
            <div className="add">
                <button type="button" class="btn btn-primary">Primary</button>
            </div>
            <div className="remove">
                <button type="button" class="btn btn-success">Success</button>
            </div>
        </div>
    </div>
</div>

So, Here when I tried to add the label then it is not ing in the one line,

can any one help me with this ?

Thanks in advance!!

I am new to the react-js. here what I am trying to do is that,

Now what I have tried is that

const options = [
    { value: 'chocolate', label: 'Chocolate' },
    { value: 'strawberry', label: 'Strawberry' },
    { value: 'vanilla', label: 'Vanilla' }
];
handleChange = (selectedOption) => {
    this.setState({ selectedOption });
    console.log(`Option selected:`, selectedOption);
}
const { selectedOption } = this.state;

<div className="row" style={styles}>
    <div className="col-12 d-flex">
        <div className="col-md-4">
            <Select
            value={selectedOption}
            onChange={this.handleChange}
            options={options}
            />
        </div>
        <div className="col-md-4">
            <Select
            value={selectedOption}
            onChange={this.handleChange}
            options={options}
            />
        </div>
        <div className="col-md-4">
            <div className="add">
                <button type="button" class="btn btn-primary">Primary</button>
            </div>
            <div className="remove">
                <button type="button" class="btn btn-success">Success</button>
            </div>
        </div>
    </div>
</div>

So, Here when I tried to add the label then it is not ing in the one line,

can any one help me with this ?

Thanks in advance!!

• javascript
• reactjs
• redux
• bootstrap-4
• react-redux

Share Follow edited Jan 16, 2019 at 11:32 ganesh kaspate asked Jan 16, 2019 at 9:37 ganesh kaspateganesh kaspate 2,6951212 gold badges5252 silver badges105105 bronze badges 6

• so you want to make code like above image ? – Nisharg Shah Commented Jan 16, 2019 at 9:48
• what exactly you want to achieve? – Arun Commented Jan 16, 2019 at 10:01
• yes I actually tried to do like that – ganesh kaspate Commented Jan 16, 2019 at 10:04
• we need to see the "options" and "selectedOption" consts + the "handleChange" method to to know that you've set everything up correctly – Erez Lieberman Commented Jan 16, 2019 at 10:17
• can you give me your code in stackblitz, so i will make your code same as image – Nisharg Shah Commented Jan 16, 2019 at 11:49

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 1

the "label" will show in the first line if your "value" property is valid - make sure your selectedOption state has a valid value that exists in your options value - all according to the docs.

your code should look something like this:

import React from 'react';
import Select from 'react-select';

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

class App extends React.Component {
  state = {
    selectedOption: null,
  }
  handleChange = (selectedOption) => {
    this.setState({ selectedOption });
    console.log(`Option selected:`, selectedOption);
  }
  render() {
    const { selectedOption } = this.state;

    return (
 <div className="row" style={styles}>
        <div className="col-12 d-flex">
            <div className="col-md-4">
                <Select
                value={selectedOption}
                onChange={this.handleChange}
                options={options}
                />
            </div>
            <div className="col-md-4">
                <Select
                value={selectedOption}
                onChange={this.handleChange}
                options={options}
                />
            </div>
            <div className="col-md-4">
                <div className="add">
                    <button type="button" class="btn btn-primary">Primary</button>
                </div>
                <div className="remove">
                    <button type="button" class="btn btn-success">Success</button>
                </div>
            </div>
        </div>
    </div>
      <Select
        value={selectedOption}
        onChange={this.handleChange}
        options={options}
      />
    );
  }
}