I'm having trouble accessing this.state in functions inside my component. I already found this question on SO and added the suggested code to my constructor:
class Game extends React.Component {
constructor(props){
super(props);
...
this.state = {uid: '', currentTable : '', currentRound : 10, deck : sortedDeck};
this.dealNewHand = this.dealNewHand.bind(this);
this.getCardsForRound = this.getCardsForRound.bind(this);
this.shuffle = this.shuffle.bind(this);
}
// error thrown in this function
dealNewHand(){
var allCardsForThisRound = this.getCardsForRound(this.state.currentRound);
}
getCardsForRound(cardsPerPerson){
var shuffledDeck = this.shuffle(sortedDeck);
var cardsForThisRound = [];
for(var i = 0; i < cardsPerPerson * 4; i++){
cardsForThisRound.push(shuffledDeck[i]);
}
return cardsForThisRound;
}
shuffle(array) {
...
}
...
...
It still does not work. this.state.currentRound is undefined. What is the problem?
I came up with something that worked. I changed the code for binding getCardsForRound in the constructor to:
this.getCardsForRound = this.getCardsForRound.bind(this, this.state.currentRound);
Write your functions this way:
dealNewHand = () => {
var allCardsForThisRound =
this.getCardsForRound(this.state.currentRound);
}
getCardsForRound = (cardsPerPerson) => {
var shuffledDeck = this.shuffle(sortedDeck);
var cardsForThisRound = [];
for(var i = 0; i < cardsPerPerson * 4; i++){
cardsForThisRound.push(shuffledDeck[i]);
}
return cardsForThisRound;
}
http://www.react.express/fat_arrow_functions
the binding for the keyword this is the same outside and inside the fat arrow function. This is different than functions declared with function, which can bind this to another object upon invocation. Maintaining the this binding is very convenient for operations like mapping: this.items.map(x => this.doSomethingWith(x)).
Related
I need to create a simple like counter. My solution to this problem i wrote in class View. But I don't understand how can i divide my code into three parts - Model, View, Controller.
class View {
constructor(model) {
this.count = 0;
this.renderInitialTodoForm();
this.likeButton.addEventListener('click', () => {
this.count++;
this.likeCount.innerHTML = this.count;
})
}
renderInitialTodoForm = () => {
this.app = this.getElement('#root');
this.likeButton = this.createElement('span');
this.likeButton.textContent = '👍';
this.likeButton.classList.add('like')
this.likeCount = this.createElement('span');
this.likeCount.textContent = 0;
this.app.append(this.likeButton, this.likeCount);
};
}
I have a problem when trying to create multiple objects in the function of a constructor function.
I'm trying to create multiple objects that each one has the array hand, and each one has the name player(x), so it would be player0: [array], player1:[array], but it does not work. I get the error
Cannot set property '0' of undefined
Code:
function Player () {
this.hand = []
}
function Players () {
}
Players.prototype.createPlayers = function (x) {
for (let i = 0; i < x; i++) {
this.player[i] = new Player()
}
}
let gamer = new Players()
console.log(gamer)
gamer.createPlayers(3)
console.log(gamer.players)
This is working try it, Is this you want?
function Player () {
this.hand = []
}
function Players () {
this.player = [];
}
Players.prototype.createPlayers = function (x) {
for (let i = 0; i < x; i++) {
this.player[i] = new Player()
}
}
let gamer = new Players()
console.log(gamer)
gamer.createPlayers(3)
console.log(gamer.players)
When binding this to my addTimes function I get an error stating: Cannot read property 'bind' of undefined.
I am building in ReactjJS and Webpack.
I recently had another issue recent which people suggested:
this.addTimes = this.addTimes.bind(this);
See: Cannot read property 'setState' of undefined ReactJS
class Settings extends React.Component {
constructor(props) {
super(props);
this.state = {
times: []
};
}
render(){
this.addTimes = this.addTimes.bind(this);
Array.prototype.remove = function() {
var what, a = arguments, L = a.length, ax;
while (L && this.length) {
what = a[--L];
while ((ax = this.indexOf(what)) !== -1) {
this.splice(ax, 1);
}
}
return this;
};
var currentTicked = [];
var times =[]
function addTimes(id){
var index = times.indexOf(id);
if (!times.includes(id)) {
$("input:checkbox[name=time]:checked").each(function(){
currentTicked.push($(this).val());
times = times.concat(currentTicked)
times = jQuery.unique(times);
currentTicked = [];
});
} else if(times.includes(id)){
times = times.remove(id);
}
console.log(times);
this.setState = {
thims: times
}
}
In order to be able to bind addTimes to this in the constructor, addTimes must be a method on your class, not just a function in the render method.
class Settings extends React.Component {
constructor(props) {
super(props);
this.state = {
times: []
};
this.addTimes = this.addTimes.bind(this);
}
addTimes(id) {
// ...
}
}
If you want to create addTimes in the render method, you could just bind this to the function there:
function addTimes(id) {
// ...
}.bind(this);
Or your could make it into an arrow function instead:
const addTimes = (id) => {
// ...
}
I'd come to a situation where I had to get the object value dynamically from an array having object keys coming from an api. I came to this approach by using eval.
class App extends React.Component {
constructor() {
super();
this.state = {
title: 'Developers',
descp: 'They are just amazing! JK',
names: ['title', 'descp']
}
}
getVal(objKey) {
let { title, descp } = this.state;
return eval(objKey);
}
render() {
let {names} = this.state;
return (
<div>
<h2>{this.getVal(names[0])}</h2>
<div>{this.getVal(names[1])}</div>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
The above code works correctly.
Another approach I found later:
render() {
let {names} = this.state;
return (
<div>
<h2>{this.state[names[0]]}</h2>
<div>{this.state[names[1]]}</div>
</div>
)
}
Outputs the same result. But my question is that if I use eval with the following case, is it a good approach to do so?
Eval should be avoided as it can be very dangerous. You can safely replace your eval call with accessing property via bracket notation.
getVal(objKey) {
if(this.state.hasOwnProperty(objKey)){
return this.state[objKey];
} else {
// handle missing property
}
}
Eval is generally avoided as it allows the client to insert and evaluate their own expressions in your code.
That being said, JavaScript being a client side language already allows full access to the user, so there isn't really a good reason not to use it.
As long as the user can only mess with their own session, i wouldn't worry. Security should be handled server side anyway so: Beware but don't simply ignore Eval.
EDIT 1 - Defending Eval
The comments pointed out some issues, mainly Performance/Optimization impact, which this answer explains in depth. Basically, since it's Just-In-Time compiling anyway, you don't really lose that much in terms of performance.
As for an example on a use case, here is a template example i whipped up, which also uses the controversial with statement:
var Template = /** #class */ (function () {
function Template(html) {
this.html = html;
}
Template.prototype.apply = function (params, returnDOMObject) {
if (params === void 0) { params = {}; }
if (returnDOMObject === void 0) { returnDOMObject = false; }
with (params) {
var html = eval('`' + this.html.replace(Template.regexes.encapsulated, function (n) {
return n
.replace(Template.regexes.start, '${')
.replace(Template.regexes.end, '}');
}) + '`');
}
if (returnDOMObject) {
return document.createRange().createContextualFragment(html);
}
return html;
};
Template.regexes = {
encapsulated: new RegExp('{{.*?}}', 'igm'),
start: new RegExp('\{{2,}', 'igm'),
end: new RegExp('\}{2,}', 'igm')
};
return Template;
}());
//TEST
var persons = [
{ name: "Peter", age: 25 },
{ name: "Ole", age: 55 },
];
var templates = [];
var container = document.body.appendChild(document.createElement("div"));
var leftBox = container.appendChild(document.createElement("div"));
var rightBox = container.appendChild(document.createElement("div"));
leftBox.style.width = rightBox.style.width = "50%";
leftBox.style.height = rightBox.style.height = "500px";
leftBox.style.cssFloat = rightBox.style.cssFloat = "left";
var leftList = leftBox.appendChild(document.createElement("select"));
leftBox.appendChild(document.createElement("br"));
var leftText = leftBox.appendChild(document.createElement("textarea"));
leftText.style.width = "100%";
leftText.style.resize = "vertical";
var rightOutput = rightBox.appendChild(document.createElement("div"));
function updateLists() {
leftList.innerHTML = '';
for (var i = 0; i < templates.length; i++) {
var template = templates[i];
var option = document.createElement("option");
option.value = option.innerHTML = template.name;
leftList.appendChild(option);
}
}
var h1Template = new Template("<h1>{{name}}</h1>");
var h2Template = new Template("<h2>{{age}} is no age!</h2>");
var pTemplate = new Template("<p>{{name}} may be {{age}}, but is still going strong!</p>\n<p>(When he's {{age*2}} though...)</p>");
var personTemplate = new Template("<p>\n{{ h1Template.apply(params) }}\n{{ h2Template.apply(params) }}\n{{ pTemplate.apply(params) }}\n</p>");
templates.push({ name: "personTemplate", template: personTemplate });
templates.push({ name: "h1Template", template: h1Template });
templates.push({ name: "h2Template", template: h2Template });
templates.push({ name: "pTemplate", template: pTemplate });
function updateOutput() {
rightOutput.innerHTML = '';
for (var pi = 0; pi < persons.length; pi++) {
var person = persons[pi];
rightOutput.appendChild(personTemplate.apply(person, true));
}
}
function leftTextChange() {
templates.find(function (val) { return val.name === leftList.value; }).template.html = leftText.value;
updateOutput();
}
function leftListChange() {
leftText.value = templates.find(function (val) { return val.name === leftList.value; }).template.html;
}
updateLists();
leftList.onchange = leftList.onkeyup = leftListChange;
leftText.onchange = leftText.onkeyup = leftTextChange;
leftListChange();
updateOutput();
Here the users input text is being interpreted live, while the user is watching. No security concerns, since it's all client side.
My code does work but I don't want the jshint errors anymore:
Functions declared within loop referencing an outer scoped variable may lead to confusing semantics
I've tried using let from ES6 to get around the error because I thought that would solve the problem. I configured my gruntfile to use ES6 as well.
I tried using two loops, the outer loop with variable 'i' and the inner loop with variable 'j'
Neither worked.
Full code provided here: https://jsfiddle.net/rwschmitz/zz7ot3uu/
var hobbies = document.getElementsByClassName("hobbies");
var active = false;
// For mouse input
for (var i = 0; i < 5; i++) {
hobbies[i].onmouseover = function() {
hobbies[0].classList.add('hobbies-slide-left');
hobbies[1].classList.add('hobbies-slide-right');
hobbies[2].classList.add('hobbies-slide-left');
hobbies[3].classList.add('hobbies-slide-right');
hobbies[4].classList.add('hobbies-slide-left');
};
}
// For click input
for (var i = 0; i < 5; i++) {
hobbies[i].onclick = function() {
hobbies[0].classList.add('hobbies-slide-left');
hobbies[1].classList.add('hobbies-slide-right');
hobbies[2].classList.add('hobbies-slide-left');
hobbies[3].classList.add('hobbies-slide-right');
hobbies[4].classList.add('hobbies-slide-left');
};
}
You could change your loops to something like this, using Array#forEach():
var hobbies = Array.from(document.getElementsByClassName('hobbies'));
var classes = ['hobbies-slide-left', 'hobbies-slide-right'];
var events = ['mouseover', 'click'];
function addHobbyClass (hobby, index) {
hobby.classList.add(this[index % this.length]);
}
function hobbyEventListener () {
hobbies.forEach(addHobbyClass, classes);
}
hobbies.forEach(function (hobby) {
this.forEach(function (event) {
this.addEventListener(event, hobbyEventListener);
}, hobby);
}, events);
Two additional examples of how to fix the problem.
var hobbies = document.querySelectorAll('.hobbies');
var eventHooks = ['mouseover', 'click'];
hobbies.forEach(function(hobby) {
eventHooks.forEach(function(hook) {
hobby.addEventListener(hook, function() {
hobbies[0].classList.add('hobbies-slide-left');
hobbies[1].classList.add('hobbies-slide-right');
hobbies[2].classList.add('hobbies-slide-left');
hobbies[3].classList.add('hobbies-slide-right');
hobbies[4].classList.add('hobbies-slide-left');
});
});
});
var hobbies = document.getElementsByClassName('hobbies');
var eventHooks = ['mouseover', 'click'];
// Attach events
var attachEvents = function(key) {
eventHooks.forEach(function(hook) {
hobbies[key].addEventListener(hook, function() {
hobbies[0].classList.add('hobbies-slide-left');
hobbies[1].classList.add('hobbies-slide-right');
hobbies[2].classList.add('hobbies-slide-left');
hobbies[3].classList.add('hobbies-slide-right');
hobbies[4].classList.add('hobbies-slide-left');
});
});
};
// Init
var init = function() {
// Loop through hobbies
for (var i = 0; i < hobbies.length; i++) {
attachEvents(i);
}
}
init();