How to handle the connection in MQTT using Paho

Question

I've managed to connect to my Mosquitto broker of Paho MQTT JS client. However, the client disconnects inmediately after completing the connection. Before it worked now I'm testing it doesn't work.

This is my code for the main functions involved: constructor() {

    super();
    this.onConnectionLost = this.onConnectionLost.bind(this)
    this.onConnect = this.onConnect.bind(this)
    this.onMessageArrived = this.onMessageArrived.bind(this)

    const client = new Paho.MQTT.Client(process.REACT_APP_HOST, Number(process.REACT_APP_PORT), clientID);
    client.onConnectionLost = this.onConnectionLost;
    client.onConnect = this.onConnect;
    client.onMessageArrived = this.onMessageArrived

constuctor(){
    client.connect({

      onSuccess: this.onConnect,
      userName: process.REACT_APP_DB_NAME,
      password: process.REACT_APP_PASSWORD,
      onFailure: this.onConnectionLost,

    });
    this.state = {

      client,
      value: 0,
    }

  }

  componentDidMount() {

    this.onConnect = this.onConnect.bind(this);

  }

  onConnect = () => {
    const { client } = this.state;
    console.log("Connected!!!!");

  }

  onConnectionLost = (responseObject) => {
    if (responseObject.errorCode !== 0) {
      console.log("onConnectionLost : " + responseObject.errorMessage);
    }
  }

  sendIntensity = () => {

    const { client } = this.state;

   client.publish(this.props.topic, this.state.value.toString(), 1)

  }

console log:

Connected!!!!
Connected!!!!
onConnectionLost : AMQJS0007E Socket error:undefined.
onConnectionLost : AMQJS0007E Socket error:undefined.
Connected!!!!

Error :

Error: AMQJS0011E Invalid state not connected. at node_modules\react-native\Libraries\LogBox....

Answer 1

 const client = new Paho.MQTT.Client(process.REACT_APP_HOST, Number(process.REACT_APP_PORT), clientID);
    client.onConnectionLost = this.onConnectionLost;
    client.onMessageArrived = this.onMessageArrived

constuctor(){
    client.connect({

      onSuccess: this.onConnect,
      userName: process.REACT_APP_DB_NAME,
      password: process.REACT_APP_PASSWORD,
      onFailure: this.onConnectionLost,

    });

You seem to define the handle to client.onConnect twice, which might account for connecting twice with the same client instance, hence the same client id and angry result.