How to call nested react function

401
September 10, 2017, at 06:40 AM

Objective: When my Game component receives a prop I want componentDidUpdate() to call a function called consolelog which is a child of another function called gamecode().

Problem: using this.gameCode.consolelog() always returns an error saying that consolelog is not a function of gameCode.

Note: Gamecode() is imported into my react component (Game) from a file called gamecode.js

Component:

import React, {Component} from 'react';
import {gameCode, showLeaderboard} from '../utility/gamecode';
class Game extends Component{
  constructor(props){
    super();
    this.state = {
      drawL : null
    }
  };
  componentDidMount(){
    this.gameCode();
  };
  componentDidUpdate(){
    //will run when the state changes
    if(this.props.leaderboard){
        var a = this.props.leaderboard;
        this.gameCode.consolelog(a);
    }
  }   
  render(){
    return(
      <div className="Game">
        <canvas id="canvas"></canvas>
        <button onClick={this.props.getleaderboard} className="showleaders">Show leaderboard</button>
      </div>
    );
  }
}
export default Game;

GameCode.js function:

gameCode(){
  //the main function initializes some stuff immediately and start running the update() and draw() functions
  const canvas = document.getElementById('canvas');
  canvas.width = 800;
  canvas.height= 600;
  const ctx = canvas.getContext("2d");
  const FPS = 30;
  setInterval(() => {
      update();
      draw();
  }, 1000/FPS);
  //but sometimes I need to call other functions on demand, but these functions depend on what the parent function and other sibling functions
  function consolelog(a){
    console.log("success!");
    console.log(a);
  }
}
Answer 1

You could use something along the lines of a revealing module pattern. Keep private variables in scope to gameCode and export the public vars and functions that you need.

const gameCode = (function () {
  const a = 1;
  function consolelog() {
    console.log(`success${a}`);
  }
  return {
    consolelog: consolelog
  }
});
export default gameCode;

In your other file:

import gameCode from './gameCode';
componentDidMount() {
  const gc = gameCode();
  gc.consolelog(); // success1
}

DEMO

Answer 2

Your Game class doesn't have a gameCode method so you can't use this.gameCode inside any of it's methods.

If you imported the gameCode inside the js file, you can use it anywhere inside:

componentDidMount(){
    gameCode();
};

The problem here is that the function gameCode in your example doesn't do anything - it only define a new function (locally) every time you call it. It's not an object that you can use to call it's function...

If gameCode was an object, you could have use:

gameCode.consolelog(something);

but it's not

You can change the gameCode to something like that:

export default gameCode = {
    consolelog: function (a){
        console.log("success!");
        console.log(a);
    }
}

And now since gameCode is an object, with the consolelog attribute as a function, you can use gameCode.consolelog(...) inside your Game class.

Answer 3

First of all, you don;t need to call it with the this key word once you imported it. You just call it that way: gameCode();.
Second, you are not returning anything from this function, hence you can't access it's nested function.
I think you need to re think the way you expose objects and functions.
For example, GameCode.js can look like this:

 const consolelog = function (a){
    console.log("success!");
    console.log(a);
 }
 export consolelog;

And then import it in your component:

import {consolelog} from '../utility/gamecode';

Edit
As a followup to your comment, if you need a function that will nest other functions and variables then you can create a class;

class GameCode {
  constructor(){
    this.consolelog = this.consolelog.bind(this);
  }
  consolelog(a){
      console.log("success!");
      console.log(a);
  }
}
export default GameCode;  

Then import it in you Component:

import GameCode from '../utility/gamecode'; // notice the import for default exports
READ ALSO
SQL unexpected error with no log, only the row with error

SQL unexpected error with no log, only the row with error

please, have a look here; and thanks all! I am trying to create a system for upgrading buildings in my gameI made my upgrade div same for all buildings

234
Create &#39;Download to CSV&#39; button from PHP array in Wordpress Admin

Create 'Download to CSV' button from PHP array in Wordpress Admin

I have populated a multi-dimensional PHP array using a function and I wish to allow my admin users to download the content

320
Is it possible to register wasm file like javascript?

Is it possible to register wasm file like javascript?

I have a javascript file that calls a wasm file, when I register the javascritpt somewhere in the script, it fetch the file from the wrong locationWhat's the best practice to solve this problem?

287
Is there any benefit to programming an entire site just by using JavaScript? [on hold]

Is there any benefit to programming an entire site just by using JavaScript? [on hold]

So recently I have come across a site known as "negafinity", I had looked at it as a normal site, until someone told me that the site was programmed using just JavaScript (presumed they had looked at theirjs files)

198