Event is not binding while creating dynamic controls - reactjs

Question

When I add an event using the first code snippet, the event is firing. But when i do the same thing with a variable, the event is not firing/binding. can any one help me?
var ProductTable = React.createClass({
ChangeSearch : function(event){console.log("Text changed");},
render: function() {
return (<input type="text"onChange= {this.ChangeSearch} />);
}
});
same code with variable:
var ProductTable = React.createClass({
var headerFilters =[];
ChangeSearch : function(event){console.log("Text changed");},
render: function() {
headerFilters.push(<th><input type="text" onChange={this.ChangeSearch} /></th>);
return ({headerFilters});
}
});
First one and the second one are looping through and adding the text boxes. With the variable only i will be able to generalize the code. I have removed the looping from the first code snippet to reduce the complexity.

Answer 1

If you need to render list of input elements its better to create simple element and map over it in Parent. Read react documentation about dynamic children
jssfidle:
code sample:
var InputTextElement = React.createClass({
changeHandler: function(event) {
console.log('text.changed' + event.target.value)
},
render: function() {
return (
<input type="text" name={this.props.name} onChange={this.changeHandler} />
)
}
})
var ProductTable = React.createClass({
render: function() {
var headerFilters =[{id: 1, name: "test"}, {id:2, name: "another"}];
return (
<div>
{ headerFilters.map(function(data) {
return <InputTextElement key={data.id} name={data.name} />;
})}
</div>
);
}
});
setTimeout(function() {
ReactDOM.render( <ProductTable />
, document.getElementById('element'))
} ,700);
working like a charm.