Adding the labels to the react-select
10,917
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}
/>
);
}
}
Related videos on Youtube
Author by
Ganesh Kaspate
Updated on June 04, 2022Comments
-
Ganesh Kaspate almost 2 years
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 coming in the one line,
can any one help me with this ?
Thanks in advance!!
-
Nisharg Shah over 5 yearsso you want to make code like above image ?
-
Arun over 5 yearswhat exactly you want to achieve?
-
Ganesh Kaspate over 5 yearsyes I actually tried to do like that
-
Erez Lieberman over 5 yearswe need to see the "options" and "selectedOption" consts + the "handleChange" method to to know that you've set everything up correctly
-
Nisharg Shah over 5 yearscan you give me your code in stackblitz, so i will make your code same as image
-
ganesh kaspate over 5 yearsActually I have not used that so
-
-
Ganesh Kaspate over 5 yearsThis will not give me the labels thing
-
Ganesh Kaspate over 5 yearsActually I was not able to get the structure as shown in image