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);
}
}
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
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.
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
How to prevent a token created with OAuth 2.0 from expiring?
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
I have populated a multi-dimensional PHP array using a function and I wish to allow my admin users to download the content
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?
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)