Getting error Cannot read property ‘setState’ of undefined

by

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>

More Related Contents:

  1. axios post request to send form data
  2. What is mapDispatchToProps?
  3. What is the best way to access redux store outside a react component?
  4. Simple Conditional Routing in Reactjs
  5. React-Redux: Actions must be plain objects. Use custom middleware for async actions
  6. How to reset TabNavigator when user logs out (from other screen)
  7. Next.js – Error: only absolute urls are supported
  8. Stop useEffect from running on mount
  9. Use Connect or pass data as props to children
  10. Use history.push in action creator with react-router-v4?
  11. How does connect work without mapDispatchToProps
  12. React router, pass data when navigating programmatically?
  13. How to give Image src dynamically in react js?
  14. How to enable file upload on React’s Material UI simple input?
  15. how to async/await redux-thunk actions?
  16. Cache busting with CRA React
  17. how to set initial state in redux
  18. My Redux state has changed, why doesn’t React trigger a re-render?
  19. How do I see state when logging to the console instead of Proxy object inside reducer action?
  20. React Router work on reload, but not when clicking on a link
  21. How do I hide API key in create-react-app?
  22. react router difference between component and render
  23. ReactJS – Add custom event listener to component
  24. Import image dynamically in React component
  25. Value of “this” is incorrect when debugging Babel transpiled React with Chrome Devtools
  26. Difference between @mui/material/styles and @mui/styles?
  27. React: Hide a Component on a specific Route
  28. this.setState is undefined
  29. Could not find “store” in either the context or props of “Connect(App)”
  30. Media queries in Material UI components

Leave a Comment