4

I'm new with Reactjs. I'm trying to do something very simple: update a div inside a render function when the user change the text inside text area. Any suggestions? 

class HTMLEditor extends React.Component {
  
  constructor(props) {
    super(props);
    this.state = {value: 'Put here HTML'};
  }
  
  
  handleChange(e) {
    this.setState({value: e.currentTarget.value});
  }
 
  
  render() {
    return (
      <div>
      <textarea defaultValue={this.state.value} onChange={ this.handleChange } />
        <div>{this.state.value}</div>
      </div>
    );
  }
}

ReactDOM.render(
  <HTMLEditor />, 
  document.getElementById('container')
);
Shubham Khatri
  • 270,417
  • 55
  • 406
  • 400
Minor Balulu
  • 81
  • 1
  • 5
  • 2
    you just have to bind `handleChange` to the component. Add `this.handleChange = this.handleChange.bind(this)` in the constructor – QoP May 01 '17 at 10:30

1 Answers1

5

You should bind the handleChange function. You are getting this error because, in your handleChange function this keywork doesn't refer to the context of the React Class and hence you need to bind the function.

See this answer on why do you need to bind event handlers in React

class HTMLEditor extends React.Component {
  
  constructor(props) {
    super(props);
    this.state = {value: 'Put here HTML'};
  }
  
  
  handleChange = (e) =>{
    this.setState({value: e.currentTarget.value});
  }
 
  
  render() {
    return (
      <div>
      <textarea defaultValue={this.state.value} onChange={ this.handleChange } />
        <div>{this.state.value}</div>
      </div>
    );
  }
}

ReactDOM.render(
  <HTMLEditor />, 
  document.getElementById('container')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>
Shubham Khatri
  • 270,417
  • 55
  • 406
  • 400
  • Great, thank for both of you!! Can you please explain what is the difference between this.handleChange = this.handleChange.bind(this) vs arrow function and what is better as a best practice? Thanks – Minor Balulu May 01 '17 at 10:41
  • check this answer http://stackoverflow.com/questions/40760646/bind-in-constructor-or-fat-arrow-in-class – Shubham Khatri May 01 '17 at 10:42