reactjs - react-select: Do we need CSS as well just to display a normal select list? -


i have following code displays normal select list. working fine logically , able log when change happens. problem is, small box being displayed instead of text box adequate show options.and placeholder being displayed normal text. when click on placeholder, values being displayed.

import select 'react-select;  class selectlist extends component {       onchange() {        console.log("value changed");      }         render() {          var select = require('react-select');          var options = [                  { value: 'one', label: 'india' },                  { value: 'two', label: 'singapore' },                  { value: 'three', label: 'iceland' }           ];         return(           <select              name="select list"              value="one"              options={options}              onchange={this.onchange.this(bind}}           />        ); } 

do need css things here. let me know missing here?

[1]: https://i.stack.imgur.com/na4ht.png 

you're importing select @ top, why doing

var select = require('react-select');

again in render function?

also onchange handler should onchange={this.onchange} , can bind handler @ top in constructor this:

this.onchange = this.onchange.bind(this); 

or can pass select component this

onchange={() => {this.onchange()}} 

as css issue, github:

// sure include styles @ point, during bootstrapping

import 'react-select/dist/react-select.css'; 

Comments

Popular posts from this blog

networking - Vagrant-provisioned VirtualBox VM is not reachable from Ubuntu host -

c# - ASP.NET Core - There is already an object named 'AspNetRoles' in the database -

ruby on rails - ArgumentError: Missing host to link to! Please provide the :host parameter, set default_url_options[:host], or set :only_path to true -