I think this solution may work only when the app is created using npx create-react-app

This solution is exemplified here

source

It is clear that this.setState can only be called on a mounted or mounting component. A mildly confusing situation I encountered was a this.setState that was called from inside of a componentDidMount method and yet resulted in the afore-mentioned message.

Obviously that was because the the this.setState was called from an asynchronous callback, as in the following code:

 componentDidMount: function() {
    $.getJSON(this.getURL(), function(data) {
              this.setState({files: data});
    }.bind(this));
 }
      

 componentDidMount: function() {
    $.getJSON(this.getURL(), function(data) {
          if (this.isMounted()) {
              this.setState({files: data});
           }
    }.bind(this));
 }
       

There are many resources on the subject that one can google about. For the benefit of my future self I've put together a small example in my playground github repo that shows how to properly use state. Bottom line is that state lives in the parent components and flows down into the child components as properties. Also, state is not set upon component initialization. The proper way to set state is with the setState method so that React can automatically call render on the component whose state was altered.

Moreover the following guidelines are useful:

• a component should only change its own state but never its own props
• instead, a component sets the props of its children
• it is an antipattern to use props to generate the state in getInitialState unless it is done only for seeding (in which case prefix the properties name with initial to make the intention clear).
  E.g.:

  props:

  initialCount

  state:

  count

It is often the case when doing development in Webpack that you have your, e.g. React JXS code running in the webpack development server (the one you typically launch with npm run dev) and you need that front-end code to access via Ajax some back-end services, e.g. some JAX-RS module deployed in a Tomcat container.

In those cases, one runs into CORS issues. To solve the problem you have to enable CORS on the backend module as described in this note.