React select onChange is not working

Question

JsFiddle : https://jsfiddle.net/69z2wepo/9956/

I am returning a select element in the render function in my react.js code.

But whenever I change the select value, the function in the onChange is not getting triggered.

var Hello = React.createClass({
render: function() {
    return <select id="data-type" onChange={changeDataType()}>
           <option selected="selected" value="user" data-type="enum">User</option>
           <option value="HQ center" data-type="text">HQ Center</option>
           <option value="business unit" data-type="boolean">Business Unit</option>
           <option value="note" data-type="date">Try on </option>
           <option value="con" data-type="number">Con</option>
      </select>
    }
});


React.render(<Hello/>, document.getElementById('container'));

 function changeDataType() {
    console.log("entered");
}

This function is getting triggered only once when the select is loaded and subsequently when I change the value, its not getting triggered.

Answer 1

onChange takes a function.

You are passing it changeDataType(), which is running the function changeDataType function, and setting onChange to it's return value, which is null.

Try passing the actual function, instead of evaluating the function.

<select id="data-type" onChange={changeDataType}>