question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Main example of code should be used within a ReactJS component

See original GitHub issue

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}
/>

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

6reactions
akhayooncommented, Jun 15, 2016

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)}
            />
        );
    }  
}
1reaction
JonnieCachecommented, Aug 18, 2016

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

The Best React Examples - freeCodeCamp
Here is a collection of React syntax and usage that you can use as a handy guide or reference. React Component Example Components...
Read more >
Components and Props - React
Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. This page provides an introduction to...
Read more >
React Components - W3Schools
Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML....
Read more >
How To Code in React.js | DigitalOcean
JSX is an abstraction that allows you to write HTML-like syntax in your JavaScript code and will enable you to build React components...
Read more >
ReactJS Class Based Components - GeeksforGeeks
Example: Program to demonstrate the use of props in class-based components. Open the App.js file and replace the code with the below code....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found