React-select: Main example of code should be used within a ReactJS component

Created on 15 Jun 2016 · 5Comments · Source: JedWatson/react-select

The initial example given in the docs is not clear because it should be given within a ReactJS component (which I think is the main use case). This will make things easier for people getting started

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

var options = [
    { value: 'one', label: 'One' },
    { value: 'two', label: 'Two' }
];

function logChange(val) {
    console.log("Selected: " + val);
}

<Select
    name="form-field-name"
    value="one"
    options={options}
    onChange={logChange}
/>

Source

akhayoon

Most helpful comment

I would recommend something like this

import React, { PropTypes, Component } from 'react'
import Select from 'react-select';
// styling
require('style!css!sass!react-select/dist/react-select.css');

export default class StoreBar extends Component {  
    constructor(props)
    {
        super(props)
        this.state = {
            value: ''
        }
    }

    logChange(val) {
        console.log("Selected: " + val);
        this.setState({ value: val});
    }

    render(){

        var options = [
            { value: 'one', label: 'One' },
            { value: 'two', label: 'Two' }
        ];

        return(
            <Select
                name="form-field-name"
                value={this.state.value}
                options={options}
                onChange={this.logChange.bind(this)}
            />
        );
    }  
}

akhayoon on 15 Jun 2016

👍6

All 5 comments

I would recommend something like this

import React, { PropTypes, Component } from 'react'
import Select from 'react-select';
// styling
require('style!css!sass!react-select/dist/react-select.css');

export default class StoreBar extends Component {  
    constructor(props)
    {
        super(props)
        this.state = {
            value: ''
        }
    }

    logChange(val) {
        console.log("Selected: " + val);
        this.setState({ value: val});
    }

    render(){

        var options = [
            { value: 'one', label: 'One' },
            { value: 'two', label: 'Two' }
        ];

        return(
            <Select
                name="form-field-name"
                value={this.state.value}
                options={options}
                onChange={this.logChange.bind(this)}
            />
        );
    }  
}

akhayoon on 15 Jun 2016

👍6

+1, only got my demo to work after a long search and finally stumbling upon this example. Thank you for putting this one up!

montrealist on 21 Jun 2016

👍1

+1, this should really be the official demo, as this is what basically everyone wants to do with the thing.

JonnieCache on 18 Aug 2016

👍1

Also +1 for this

hutber on 5 Sep 2016

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues / pull requests.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our limited efforts to maintain the latest version.

If you feel this issue / pull request is still relevant and you'd like us to review it, please leave a comment and we'll do our best to get back to you.