I managed to get it working in IE8, actually just a few changes were needed: ivelum/react-autocomplete@ivelum:de209bc...daf45ad

I would happy to make a PR, but not sure if this repository is still maintained. @ryanflorence are you interested in patches like this?

I've just read your complain on twitter, and inspired by react-radio-group, I've come up with the following API:

<AutoComplete
  onSelect={doSomething}
  onSearchTermChange={(query, next)=> queryOptions(query).then(next) }
  children={(state, controls)=>
    /*
      `controls` provides callbacks to control AutoComplete, such as setQuery,
      unfocusOption, focusNextOption and focusPrevOption. Also, it can provide the
      `navigateByKeyboad`, which will handle the up and down keys and enter.

      unfocusOption, will unfocus the current focused option.
    */
    <input
      type="search"
      name="query"
      value={state.query}
      onChange={controls.setQuery}
      onKeyPress={controls.navigateByKeyboard}
    />
    { state.async && state.isLoading? <LoadingIcon />:

      {/* `Popup` is a dumb vendor component */}
      <Popup>
        {state.options?
          state.options.map(({option, state, controls})=>
            <div
              key={option.id}
              {/*
                `controls` here could have the AutoComplete `controls` bound to
                current option, such as focusOption, focusNextOption, focusPrevOption,
                selectOption, all with no arguments, so it can be event callbacks
              */}
              onClick={controls.select}
              onMouseEnter={controls.focus}
              onMouseLeave={controls.unfocus}

              className={(state.isFocused? "focused ":"")+(state.isSelected? "selected": "")}

              {/* `option`  could be of any type */}
              children={option.value} 
            />
          )
        :`No valid options for ${query}.`}
      </Popup>
    }
}/>

What do you think?

I am on Windows 8.2 with IE in either Edge or IE10 mode.

When I visit https://reactcommunity.org/react-autocomplete/static-data/ and type nebr,
I see a flash of the autocomplete menu and then the text box contains ebrn.

Fixed in #99

It would be awesome if you added support for pulling data in from a graphql query via relay. Do you have any plans to?

combobox component is missing its displayName (making quick notes as I start to bring this in)

I installed this component and spent about 4 hours straight trying to make it work, only to finally realize that it is completely unusable with up-to-date dependencies (like you would have if you start writing a React app from scratch with npm init && npm install --save react react-autocomplete jsx-loader webpack).

To demonstrate the problem, from a clean clone of react-autocomplete, apply the following patch:

diff --git a/examples/basic/main.js b/examples/basic/main.js
index 0aaa8b2..4c0d85b 100644
--- a/examples/basic/main.js
+++ b/examples/basic/main.js
@@ -1,7 +1,7 @@
 /** @jsx React.DOM */
 var React = require('react');
-//var Autocomplete = require('react-autocomplete');
-var Autocomplete = require('../../lib/main');
+var Autocomplete = require('react-autocomplete');
+//var Autocomplete = require('../../lib/main');
 var Combobox = Autocomplete.Combobox;
 var ComboboxOption = Autocomplete.Option;
 var states = require('../states');
diff --git a/package.json b/package.json
index 94b06bc..442d330 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "react-autocomplete",
+  "name": "react-autocomplete-examples",
   "version": "0.0.2",
   "description": "",
   "main": "lib/main.js",
@@ -9,12 +9,13 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "react": "^0.10.0"
+    "react": "^0.12.2",
+    "react-autocomplete": "0.0.2"
   },
   "devDependencies": {
-    "jsx-loader": "^0.10.2",
-    "webpack": "^1.3.0-beta5",
-    "rf-release": "^0.1.2"
+    "jsx-loader": "^0.12.2",
+    "webpack": "^1.6.0",
+    "rf-release": "^0.4.0"
   },
   "tags": [
     "react",

Then run npm install and webpack, open examples/basic/index.html in a browser, and note that the combo box doesn't even appear. Instead, all the options are vomited to the screen with the word UNMOUNTED separating them:

UTALALAlabamaUNMOUNTEDAKAKAlaskaUNMOUNTEDAZAZArizonaUNMOUNTEDARARArkansasUNMOUNTEDCACACaliforniaUNMOUNTEDCOCOColoradoUNMOUNTEDCTCTConnecticutUNMOUNTEDDEDEDelawareUNMOUNTEDFLFLFloridaUNMOUNTEDGAGAGeorgiaUNMOUNTEDHIHIHawaiiUNMOUNTEDIDIDIdahoUNMOUNTEDILILIllinoisUNMOUNTEDININIndianaUNMOUNTEDIAIAIowaUNMOUNTEDKSKSKansasUNMOUNTEDKYKYKentuckyUNMOUNTEDLALALouisianaUNMOUNTEDMEMEMaineUNMOUNTEDMDMDMarylandUNMOUNTEDMAMAMassachusettsUNMOUNTEDMIMIMichiganUNMOUNTEDMNMNMinnesotaUNMOUNTEDMSMSMississippiUNMOUNTEDMOMOMissouriUNMOUNTEDMTMTMontanaUNMOUNTEDNENENebraskaUNMOUNTEDNVNVNevadaUNMOUNTEDNHNHNew HampshireUNMOUNTEDNJNJNew JerseyUNMOUNTEDNMNMNew MexicoUNMOUNTEDNYNYNew YorkUNMOUNTEDNCNCNorth CarolinaUNMOUNTEDNDNDNorth DakotaUNMOUNTEDOHOHOhioUNMOUNTEDOKOKOklahomaUNMOUNTEDOROROregonUNMOUNTEDPAPAPennsylvaniaUNMOUNTEDRIRIRhode IslandUNMOUNTEDSCSCSouth CarolinaUNMOUNTEDSDSDSouth DakotaUNMOUNTEDTNTNTennesseeUNMOUNTEDTXTXTexasUNMOUNTEDUTUTUtahUNMOUNTEDVTVTVermontUNMOUNTEDVAVAVirginiaUNMOUNTEDWAWAWashingtonUNMOUNTEDWVWVWest VirginiaUNMOUNTEDWIWIWisconsinUNMOUNTEDWYWYWyomingUNMOUNTEDUNMOUNTED

Please at least put up a big warning that react-autocomplete is incompatible with the current versions of react and jsx-loader, so that no one else tries to use this broken component by mistake.

The only bug number that I have memorized at this point is #140. It keeps coming up, and maintaining the ever-growing whitelist is infuriating.

As a baby step toward fixing that bug, I think it would be nice to know if the spread operator is used during element creation, since this is the primary way that attributes could be accidentally passed to an element. We could then only enforce the whitelist on elements that are using the spread operator, as a baby step toward eliminating the whitelist altogether. In order to do this though, I think we need to modify the transform (Babel?), right? Do we want to file a bug against them?

This issue is mostly exploratory, to get an idea of what would need to be involved to do this effectively. RFC: @spicyj, @sebmarkbadge

I have a drop down representing the countries and auto complete representing the cities.
When I change country I want auto complete to be empty no matter was there previously.
Currently
How to achieve that ?

 // My render
  render: function() {
    return (
      <div className="form-field">
        <label className="form-field__label">Location</label>
        <div className="form-field__value">
          <div className="selectcontainer">
            <select className="input-select"
                ref='country'
                value={this.props.country}
                onChange={this.onCountry}>
              {countries.map(function(d){
                return (<option key={d.code}  value={d.code}>{d.name}</option>);
              })}
            </select>
          </div>
          (<Autocomplete
             ref="city"
             defaultValue={this.props.city} 
             getItemValue={R.identity}
             onChange={this.onChange}
             onSelect={this.onChange}
             items={this.props.cities}
             renderItem={function (city) {
               return (<div key={city} >{city}</div>);
             }} />)
        </div>
      </div>
    );
  }

When you are typing in the input field if you match an item by more than a few characters it will narrow the search results and highlight the top option. Once this happens if you try to type additional letters the cursor will have moved to the first position of the text field.

This can be demonstrated using the examples linked on the site:
https://reactcommunity.org/react-autocomplete/async-data/

https://github.com/rackt/eslint-config-rackt contains a starting point that all org repos can build off of. This can be introduced by first using the config and overriding any rules that the repo doesn't comply with, without having to change any of the source. Then for non-controversial rules, PRs can be made to update the source to comply.

Here's the initial PR: #55

Hi, I've been having a difficult time getting this to build in webpack.

I installed with NPM
I am using the Grunt Webpack plugin with the JSX loader . I have set the loader like this, with the thought that it would match both .js and .jsx files:

      { test: /\.js.*$/, loader: 'jsx-loader' },

the problem is I keep getting the error.

Any thoughts on how to make Webpack build this? or what I'm doing wrong.

I can't figure out a way to set the state to empty without manually deleting the characters. Probably I'm doing something crazy, but it might be nice if we could programmatically clear (or just set the value). Not sure the best way to do it.

Or is that out of scope?

Nexus 5, delete issue

It's hard to show this issue but I have captured it via USB debugging. When you try and delete the last letter it doesn't change the value, then (seemingly) randomly after a certain amount of attempts it will delete the whole field.

You can see on the right hand side when the elements flash I am typing in the box.

https://github.com/reactjs/react-autocomplete/blob/master/lib/Autocomplete.js#L52 < This seems problematic... Obviously the same ID won't exist on both sides of the pipe

Add option categories, so we can present users with different sorts of options. This is well-supported in other autocomplete widgets.

This will require abstracting away the code to get widget DOM elements a bit. Right now you can add arbitrary elements to the combobox, but focusNext() and focusPrevious() will focus them, and they can then be selected.

If you set the combobox to autocomplete and you type the beggining of something in your list and it has the rest of the element highlighted (autocompleted) and click anywhere else (other than any part of the combobox or combooption elements) the on select event will fire even though it shouldn't.

Here's the relevant part of my code (my combobox only uses an array, not an array of Ids and Names):

var VariableSearch = React.createClass({
    getInitialState: function() {
        return {
            //list of possible values
            matches: this.props.list,
            // the current selection
            selected: ''
        };
    },

    // called by the combobox when the user types into the field the point is to
    // set some state to cause a redraw of the options
    handleInput: function(userInput) {
        // make sure to clear out the current selection
        this.setState({selected: null}, function() {
            // and then do our client-side filtering, need to it after setState has happened
            // so that the value doesn't get rerendered to the old selected
            // (this might be bad implementation at this point, still exploring a better
            // way to handle this)
            this.filterStates(userInput);
        }.bind(this));
    },

    // this demo uses client-side filtering, but you can easily query a server
    // instead and then set state when the response lands
    filterStates: function(userInput) {
        if (userInput === '' || userInput == null) {
            return this.setState({matches: this.props.list});
        }
        else {
            var filter = new RegExp('^'+userInput, 'i');
            //setTimeout(function() {
            //  this.setState({matches: this.props.list.filter(function(name) {
            //      return filter.test(name);
            //  })});
            //}.bind(this), 500);
            return this.setState({matches: this.props.list.filter(function(name) {
                        return filter.test(name);
            })});
        }
    },

    // Called by the Combobox when the user makes a selection
    handleSelect: function(value) {
        this.props.handleVariableClick(value);
        this.setState({
            selected: value,
            // for client-side filtering you probably want to populate your list
            // again so when they open it they can choose something besides what they
            // just picked
            matches: this.props.list
        });
    },

    renderComboboxOptions: function() {
        // render calls this, it creates all the options for the combobox
        return this.state.matches.map(function(name) {
            return (
                    <ComboboxOption key={name} value={name}>{name}</ComboboxOption>
            );
        },this);
    },

    render: function() {
        var menuContent = this.state.matches.length ?
            this.renderComboboxOptions() :
            // if none of the options match what the user has typed, tell them
            <div style={{padding: '8px'}} aria-live="polite">No matches</div>;
        return (
                <div>
                <Combobox onInput={this.handleInput} onSelect={this.handleSelect} value={this.state.selected} autocomplete="both">
                {menuContent}
            </Combobox>
                </div>
        );
    }
});


var testlist = [
"rgfint",
"rgw",
"rme",
"rpd",
"rrffe",
"rrfix",
"rrmet",
"rrtr",
"rspnia",
"rstar",
"rtb",
"rtbe",
"rtinv",
"rtpd",
"rtpi",
"rtps",
"rtr",
"t47",
"tapdad",
"tapdd",
"tapddp",
"tapds",
"tapdt",
"tapsad",
"tapsda",
"tapssl",
"tfcin",
"tfibn",
"tfpn",
"tfsin",
"trfci",
"trfcim",
"trfib",
"trfp",
"trfpm",
"trfpt",
"trfptx",
"trfsi",
"trsci",
"trscit",
"trsib",
"trsibt",
"trsp",
"trspp",
"trspt",
"trsptx",
"trssi",
"trssit",
"tryh",
"tscin",
"tsibn",
"tspn",
"tssin",
"uces",
"ucfs",
"uemot",
"uemp",
"ufcbr",
"ufnfir",
"ufnir",
"ufpcm",
"ufpxm",
"uftcin",
"ugfdbt",
"ugsdbt",
"ugsint",
"ugssub",
"ujcca",
"ujccac",
"ujygfe",
"ujygfg",
"ujygse",
"ujygsg",
"ulef",
"ules",
"upcpi",
"upcpix",
"upgfl",
"upgsl",
"upkpd",
"upmp",
"upxnfb",
"uqpct",
"uveoa",
"uvpd",
"uvpi",
"uvps",
"uxeng",
"uxnfbt",
"uyd",
"uyhi",
"uyhln",
"uyhptn",
"uyhsn",
"uyhtn",
"uyl",
"uyni",
"uynicp",
"uyp",
"uysen",
"veo",
"veoa",
"vpd",
"vpi",
"vps",
"wdnfcn",
"wpo",
"wpon",
"wps",
"wpsn",
"xeng",
"xfs",
"xfsn",
"xg",
"xgap",
"xgap2",
"xgde",
"xgden",
"xgdi",
"xgdin",
"xgdo",
"xgdp",
"xgdpn",
"xgdpt",
"xgdptn",
"xgn",
"xgo",
"xgpot",
"xnfb",
"xnfbn",
"xnfbo",
"xnfbt",
"xp",
"xpn",
"ycsn",
"ydn",
"ygfsn",
"ygssn",
"yh",
"yhgap",
"yhibn",
"yhin",
"yhl",
"yhln",
"yhp",
"yhpcd",
"yhpgap",
"yhpntn",
"yhpshr",
"yhptn",
"yhshr",
"yhsn",
"yht",
"yhtgap",
"yhtn",
"yhtshr",
"ykin",
"ykpdn",
"ykpsn",
"ymsdn",
"ynicpn",
"ynidn",
"yniin",
"yniln",
"ynin",
"ynisen",
"ypn",
"zdivgr",
"zecd",
"zeco",
"zeh",
"zgap05",
"zgap10",
"zgap30",
"zgapc2",
"zlhp",
"zpi10",
"zpi10f",
"zpi5",
"zpib5",
"zpic30",
"zpic58",
"zpicxfe",
"zpieci",
"zrff10",
"zrff30",
"zrff5",
"zvpd",
"zvpi",
"zvps",
"zxnfbd",
"zxnfbi",
"zxnfbs",
"zyh",
"zyhp",
"zyhpst",
"zyhst",
"zyht",
"zyhtst",
"zynid",
]

var handleVariableClick = function(variable) {console.log(variable);};

React.renderComponent(
  <VariableSearch handleVariableClick={handleVariableClick} list={testlist} />,
  document.getElementById('container')
);

Can you replicate this bug? It is bothering me, but I can't figure out what's causing it (I will continue to look, however).

Anyways, thanks for the great work so far. I'm happy to help, but my javascript skills aren't excellent (yet).

Using NPM 3+

Autocomplete is fully not usable on mobile devices. Entering a new symbol clears selection, but not adds letter. Need to type letter twice.

On some devices after second typing, letter duplicated.

It seems to be mostly working out of the box, but I ran into one bug--the Enter key down handler pulls the highlighted item out of the list with square brackets:
this.getFilteredItems()[this.state.highlightedIndex]
Would you be willing to change this to:
this.getFilteredItems().get(this.state.highlightedIndex)

For IG I was able to get away without making any changes to this component except adding a big comment block indicating the copyright of the component. What's the best practice here? Should it be included in combobox.js?

https://github.com/rackt/react-autocomplete/blob/master/lib/Autocomplete.js#L301

Hi.
If I want make this div display block? How I make it, without change code in node_modules?

We're merging @rackt with the @reactjs GitHub org. Just wanted to let everyone know we'll be transferring this repo over there.

mui/material-ui#364

if you wrap the example's setState({states: ... in a setTimeout and then use it, things get weird pretty easily, haven't identified what exactly is happening.

Hi!
Is there a way to control the opening direction programmatically?
kinda like the native select tag, opens up or down.
thanks!

I've npm install react-autocomplete. but when I gulp, I get this:

events.js:72
throw er; // Unhandled 'error' event
^
Error: Parsing file /Users/oriharel/oriApp/sixdegrees/node_modules/react-autocomplete/lib/combobox.js: Unexpected token (358:6)
at Deps.parseDeps (/Users/oriharel/oriApp/sixdegrees/node_modules/browserify/node_modules/module-deps/index.js:418:28)
at fromSource (/Users/oriharel/oriApp/sixdegrees/node_modules/browserify/node_modules/module-deps/index.js:361:48)
at /Users/oriharel/oriApp/sixdegrees/node_modules/browserify/node_modules/module-deps/index.js:356:17
at ConcatStream. (/Users/oriharel/oriApp/sixdegrees/node_modules/browserify/node_modules/concat-stream/index.js:32:43)
at ConcatStream.EventEmitter.emit (events.js:117:20)
at finishMaybe (/Users/oriharel/oriApp/sixdegrees/node_modules/browserify/node_modules/readable-stream/lib/_stream_writable.js:460:14)
at endWritable (/Users/oriharel/oriApp/sixdegrees/node_modules/browserify/node_modules/readable-stream/lib/_stream_writable.js:469:3)
at ConcatStream.Writable.end (/Users/oriharel/oriApp/sixdegrees/node_modules/browserify/node_modules/readable-stream/lib/_stream_writable.js:436:5)
at DuplexWrapper.onend (/Users/oriharel/oriApp/sixdegrees/node_modules/browserify/node_modules/readable-stream/lib/_stream_readable.js:537:10)
at DuplexWrapper.g (events.js:180:16)
at DuplexWrapper.EventEmitter.emit (events.js:117:20)
at /Users/oriharel/oriApp/sixdegrees/node_modules/browserify/node_modules/readable-stream/lib/_stream_readable.js:934:16
at process._tickCallback (node.js:415:13)

It looks like I'm expected to react transform the combobox jsx to js. but it's in the node_modules.
So, is this the case and if so, how to add the task to do it?

On trying to get the examples to work I tried npm i && npm start and it errored out. Relevant error messages:

Failed at the [email protected] start script 'rackt server'.
Tell the author that this fails on your system:
rackt server

Upon trying node_modules/rackt-cli/bin/rack server I get the following error message:

.../node_modules/rackt-cli/bin/../tasks/server: line 5: .../node_modules/rackt-cli/bin/..//node_modules/.bin/webpack-dev-server: No such file or directory

Local folder structure redacted for clarity.

Seems related to #51

Can this be fixed? it is just a easy fix.

WCAG requires labels to always be visible and each input needs an accessible name, those can be the same if using a element

The component does not set a default value if the data came after rendering. For quick reference just replace getInitialState method in basic example with this one:

  getInitialState: function() {
      var self = this;

      setTimeout(function() {
          self.setState({states: states});
      }, 400);
    return {
      // the data the user can select from
      states: [],
      // the current selection
      selectedStateId: 'AL'
    };
  }

Checks all elements that contain a WAI-ARIA role to ensure that all required children roles are present
(More Info)

wcag2a wcag411 

Target: #container > div > div > input
HTML:

Summary:
Fix any of the following:

Required ARIA children role not present: listbox textbox

When building a typeahead I don't want to show the down arrow, would be nice if it were customizable.

would be nice for requireJS users

I just tried out the library. It's excellent, one thing though - the example files seem to be incomplete and broken.

<!doctype html>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>react component</title>
<link href="app.css" rel="stylesheet"/>
<body>
  <div id="container"></div>
  <script src="../__build__/shared.js"></script>
  <script src="../__build__/static-data.js"></script>

Please, refer to this stackoverflow question for further details.
http://stackoverflow.com/questions/30416097/browserify-transform-with-reactify

I think the right behavior when clicking the arrow while the menu is open is to close the menu, right?

I've recently adopted a codebase that uses v0.1.4 and so am trying to wrap my head around how it works. I downloaded the zip of the archive and opened examples/static-data/index.html in Chrome. According to the Network tab the following files 404:

• examples/build/shared.js
• examples/build/static-data.js

static-data.js is in the same folder so I could easily fix the path in index.html but I don't see shared.js anywhere. I tried npm i && npm start as mentioned in #46 but still no luck (I've reported that issue as well at #107).

You works with controlled component and update value via props.value

value={this.props.value}

May it would be better to use uncontrolled components approach when you set nothing except default value if it is needed?

return <input type="text" defaultValue="Hello!" />

And set value from dropdown box if an action happens.

From another issue comment from @CMTegner, here's the general 'remaining tasks before v1' list.

@sprjr good to have you back! Here's my take on v1:

Blockers

#94
Nice-to-have (bugfixes, changes, improvements)

52

#68
#84
#92
#93
#103
#104
#106
There's a couple of topics we need to address either before v1 or soon thereafter:

Menu styling/positioning: The current implementation and default setup is not great. I'm tempted to just ditch it all and force the user to decide how to render the menu (we'll provide offset and other meta data). The alternative is to go for a relatively positioned menu, which we could easily do since we wrap both the input and the menu with a div. I could mock up both suggestions unless you have a better suggestion. Here are some issues for reference: #69, #70, #75, #100, #102
highlightedIndex: #52 and #106 try to fix some of the issues, but the fact is that highlightedIndex isn't updated when props.items changes. This needs to be fixed properly.
To be closed (already fixed, no longer applicable, etc)

13

15

30

45

50

53

64

74

95

97

99

105

• more, these were just the obvious ones

How can I set placeholder and other options in placeholder?

In the code I cannot see that option

Thanks

I'd like to be able to retrieve the query even when the Enter key is pressed, even when an autocomplete option isn't selected, so that the user can submit queries that aren't in the autocomplete options.

We use initialvalue (now it is value) to render saved result.

Can u add any element to clear the search string?

Not useful

The event var is structured but empty in the following code, can't find out what's wrong.

<Autocomplete
    items={this.state.autocompletedStations}
    onSelect={() => {
        this.setState({
            autocompletedStations: []
        });
    }}
    onChange={this.stationsAutocompleteChange.bind(this)}
    renderItem={this.renderAutocompleteItem.bind(this)}
    getItemValue={station => station.crsCode}
    inputProps={{ className: 'station-entry' }}
/>

stationsAutocompleteChange(event, value) { console.log(event) }

0: SyntheticEvent
_dispatchIDs: null
_dispatchListeners: null
bubbles: null
cancelable: null
currentTarget: null
defaultPrevented: null
dispatchConfig: null
dispatchMarker: null
eventPhase: null
isDefaultPrevented: ()
isPropagationStopped: ()
isTrusted: null
nativeEvent: null
target: null
timeStamp: null
type: null
__proto__: SyntheticEvent

I get this fine error when I use the autocomplete widget with 0.14:

Uncaught Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component'srendermethod, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).

It can probably be fixed by removing the refs and doing some other trickiness instead.

Inside the custom menu demo, I got this error http://rackt.github.io/react-autocomplete/custom-menu/

Uncaught TypeError: Cannot read property 'ownerDocument' of nullgetClientPosition @ shared.js:20971
getOffset @ shared.js:21034
module.exports.offset @ shared.js:21336
scrollIntoView @ shared.js:20856
maybeScrollItemIntoView @ shared.js:20561
componentDidUpdate @ shared.js:20554
assign.notifyAll @ shared.js:3435O
N_DOM_READY_QUEUEING.close @ shared.js:17673
Mixin.closeAll @ shared.js:4738
Mixin.perform @ shared.js:4679
Mixin.perform @ shared.js:4665
assign.perform @ shared.js:3177
flushBatchedUpdates @ shared.js:3257
ReactPerf.measure.wrapper @ shared.js:3540
NESTED_UPDATES.close @ shared.js:3133
Mixin.closeAll @ shared.js:4738
Mixin.perform @ shared.js:4679
assign.perform @ shared.js:3177
flushBatchedUpdates @ shared.js:3257
ReactPerf.measure.wrapper @ shared.js:3540
Mixin.closeAll @ shared.js:4738
Mixin.perform @ shared.js:4679
ReactDefaultBatchingStrategy.batchedUpdates @ shared.js:15795
batchedUpdates @ shared.js:3192
ReactEventListener.dispatchEvent @ shared.js:17396

Hi,

I would like to suggest to use the .jsx file extension for files with jsx syntax. It makes handling with build systems easier, at least for me.