Solving inaccesible variable inside jquery .bind() anonymous function using react lifecycle

Question

I need to have access to the jqconsole variable outside of the anonymously bound function. How do i instantiate it outside of the JQuery habitat? If possible, i would just save it globally or to my state. I did not manage to get it to run this way.

  componentDidMount = () => {
    // Execute after fully loaded
    $(window).bind('load', () => {
      const jqconsole = $('#console').jqconsole(
        'Welcome to the console!\n',
        '>'
      );
      // register some workarounds
      jqconsole.RegisterMatching('{', '}', 'brace');
      jqconsole.RegisterMatching('(', ')', 'paran');
      jqconsole.RegisterMatching('[', ']', 'bracket');

      const startPrompt = () => {
        // scroll to bottom -- NOT WORKING YET
        $('#console').scrollTop($('#console')[0].scrollHeight);
        // Start the prompt with history enabled.
        jqconsole.Prompt(true, input => {
          let transformedString;
          // Manage Output
          try {
            transformedString = window.eval(input);
            if (typeof transformedString === 'object') {
              this.writeToConsole(jqconsole, 'object', transformedString);
            } else {
              this.writeToConsole(jqconsole, 'message', transformedString);
            }

            // Restart the input prompt.
            startPrompt();
          } catch (error) {
            this.writeToConsole(jqconsole, 'error', error);
            // Restart the input prompt.
            startPrompt();
          }
        });
      };
      // Restart the input prompt.
      startPrompt();
    });
  };

To be precise: I have this class method writeToConsole, and want to call it without having to deliver the instance of jqconsole:

  // Manage Output
  writeToConsole = (jqconsole, type, message) => {
    console.log('writing to console @ console');
    if (type === 'error') {
      jqconsole.Write(message + '\n', 'jqconsole-output-error');
    } else if (type === 'message') {
      jqconsole.Write(message + '\n', 'jqconsole-output');
    } else if (type === 'object') {
      jqconsole.Write(JSON.stringify(message) + '\n', 'jqconsole-output');
    } else {
      console.log('error @ writeToConsole');
      return null;
    }
  };

Thank you for your time and help.

Move the `jqconsole` variable declaration *outside* of `window.load`. Also note that jQuery's `bind()` method was deprecated a long time ago. You shouldn't be using it. Use `on()` instead. Also check that your version of jQuery is up to date. — Rory McCrossan, Aug 31 '18 at 08:38
@Spacemoose *makes no.*? Do you mean: *makes no sense*? If yes, please read above comment. Hope that helps! — Rajesh, Aug 31 '18 at 08:44
@Rajesh but in the OPs case they are consistently using arrow functions, so the outer scope of the parent object is maintained all the way down the logic. Unusual, hard to follow and counter-intuitive, I would agree, but it's not an issue in this case. — Rory McCrossan, Aug 31 '18 at 08:45
I guess my real question is how to make the instance of jqconsole available throughout my whole class environment? — Divide by Zero, Aug 31 '18 at 08:57
I managed to get it out of the .bind() now. And it still works. Now i need to be able to access it from the `writeToConsole` method. — Divide by Zero, Aug 31 '18 at 08:58
Ok i solved it. I just saved it to `this.myConsole` in the constructor. — Divide by Zero, Aug 31 '18 at 09:06
@Spacemoose please check this [fiddle](http://jsfiddle.net/RajeshDixit/4as9cjze/14/). Though its not tested, hopefully it will help. — Rajesh, Aug 31 '18 at 09:09

score 0 · Accepted Answer · answered Aug 31 '18 at 09:21

0

I solved my own question, by instantiating my jqconsole to this.myConsole in the constructor. This way it is accessible throughout the whole component.

answered Aug 31 '18 at 09:21

Divide by Zero

1,343
1
14
37

Solving inaccesible variable inside jquery .bind() anonymous function using react lifecycle

1 Answers1