I am new to ReactJs.I tried a small snippet with React.But this.state is not working in ES6 ReactJs.Help me what I am missing!!
JS without ES6:
var App = React.createClass({
getInitialState: function() {
return {value:''};
},
handleClick: function(e){
this.setState({value:e.target.value});
console.log(this.state.value);//getting value here
},
render: function() {
return(
<div>
Hello {this.props.name}
<input type="text" onChange={this.handleClick}/>
{this.state.value}// no value
</div>);
}
});
React.render(<App name="Praveen" />, document.getElementById('content'));
This case is working fine. Jsbin code
JS with ES6:
class App extends React.Component {
constructor(props){
super(props)
this.state ={value:''};
}
handleClick(e){
this.setState({value:e.target.value});
console.log(this.state.value);//getting value here
}
render() {
return(
<div>
Hello {this.props.name}
<input type="text" onChange={this.handleClick}/>
{this.state.value}// no value
</div>);
}
}
React.render(<App name="Praveen" />, document.getElementById('content'));
In this case whenever I am setting this.setState() render function is not called. Jsbin code
I am new to ReactJs.I tried a small snippet with React.But this.state is not working in ES6 ReactJs.Help me what I am missing!!
JS without ES6:
var App = React.createClass({
getInitialState: function() {
return {value:''};
},
handleClick: function(e){
this.setState({value:e.target.value});
console.log(this.state.value);//getting value here
},
render: function() {
return(
<div>
Hello {this.props.name}
<input type="text" onChange={this.handleClick}/>
{this.state.value}// no value
</div>);
}
});
React.render(<App name="Praveen" />, document.getElementById('content'));
This case is working fine. Jsbin code
JS with ES6:
class App extends React.Component {
constructor(props){
super(props)
this.state ={value:''};
}
handleClick(e){
this.setState({value:e.target.value});
console.log(this.state.value);//getting value here
}
render() {
return(
<div>
Hello {this.props.name}
<input type="text" onChange={this.handleClick}/>
{this.state.value}// no value
</div>);
}
}
React.render(<App name="Praveen" />, document.getElementById('content'));
In this case whenever I am setting this.setState() render function is not called. Jsbin code
Share Improve this question edited May 3, 2018 at 4:07 Yangshun Tay 53.2k33 gold badges123 silver badges150 bronze badges asked Sep 29, 2015 at 17:32 Praveen RajPraveen Raj 1,0141 gold badge8 silver badges12 bronze badges 02 Answers
Reset to default 5React in ES6 removed auto binding of this
which means that functions declared on a class that extends React.Component
must either .bind(this)
explicitly or use arrow function syntax.
<input type="text" onChange={this.handleClick.bind(this)} />
or
class App extends React.Component {
handleClick = (e) => {}
}
For performance reasons, it is remended to do the bind
ing in the constructor instead so that the binding only happens upon initialization instead of on every render
.
Read more about event handlers on React docs here.
class App extends React.Component {
constructor(props) {
super(props)
this.state = {value:''};
this.handleClick = this.handleClick.bind(this);
}
handleClick(e) {
this.setState({value:e.target.value}, () => {
console.log(this.state.value); // Updated value here
});
}
render() {
return(
<div>
Hello {this.props.name}
<input type="text" onChange={this.handleClick}/>
{this.state.value}// no value
</div>
);
}
}