I'm new to developing in react-native. Right now I'm trying to code a simple Scoreboard for the Dart game "Cricket" to get my feet wet.

It is basically a game where you need to hit the 15-20 and bullseye fields 3 times to close them. If you hit them more than 3 times you can collect points.

My first version of the app is working but its ugly and uses lots lines of code. I made a function for every point field (15-20 + bullseye) to add the points. Like:

tap20(){

this.state.indicator = "x";

if(this.state.tapped_20 > 1){
    this.state.indicator = "xx";
if(this.state.tapped_20 > 2){
  this.state.indicator = "xxx";
  if(this.state.tapped_20 > 3){
  this.state.points = 20 + this.state.points

  }
}
}

this.setState({

points: this.state.points,
tapped_20: this.state.tapped_20+1,
})
}

tap19(){

this.state.indicator_19 = "x";

if(this.state.tapped_19 > 1){
    this.state.indicator_19 = "xx";
if(this.state.tapped_19 > 2){
  this.state.indicator_19 = "xxx";
  if(this.state.tapped_19 > 3){
  console.log("Ab hier Punkte..")
  this.state.points = 19 + this.state.points

  }
}
}

this.setState({

points: this.state.points,
tapped_19: this.state.tapped_19+1,
})
}

Etc.. My approach was now to overgive an parameter with the function. So i just have one function which adds the points based on the given parameter. Like so:

<TouchableHighlight style={styles.button}
onPress={this.testfunc.bind(this, 20)}
underlayColor='#99d9f4'>
<Text style={styles.buttonText}> 20 Test</Text>
 </TouchableHighlight>

Which calls the the function:

testfunc(i) {

  window['this.state.indicator_' + i ] = 'test'

  console.log(this.state.indicator_20)
...

When i debug it in the Browser it states that the console.log(this.state.indicator_20) is undefined.

It seems it does not work with this.state... Does anyone know how to solve such a problem?

I'm new to developing in react-native. Right now I'm trying to code a simple Scoreboard for the Dart game "Cricket" to get my feet wet.

It is basically a game where you need to hit the 15-20 and bullseye fields 3 times to close them. If you hit them more than 3 times you can collect points.

My first version of the app is working but its ugly and uses lots lines of code. I made a function for every point field (15-20 + bullseye) to add the points. Like:

tap20(){

this.state.indicator = "x";

if(this.state.tapped_20 > 1){
    this.state.indicator = "xx";
if(this.state.tapped_20 > 2){
  this.state.indicator = "xxx";
  if(this.state.tapped_20 > 3){
  this.state.points = 20 + this.state.points

  }
}
}

this.setState({

points: this.state.points,
tapped_20: this.state.tapped_20+1,
})
}

tap19(){

this.state.indicator_19 = "x";

if(this.state.tapped_19 > 1){
    this.state.indicator_19 = "xx";
if(this.state.tapped_19 > 2){
  this.state.indicator_19 = "xxx";
  if(this.state.tapped_19 > 3){
  console.log("Ab hier Punkte..")
  this.state.points = 19 + this.state.points

  }
}
}

this.setState({

points: this.state.points,
tapped_19: this.state.tapped_19+1,
})
}

Etc.. My approach was now to overgive an parameter with the function. So i just have one function which adds the points based on the given parameter. Like so:

<TouchableHighlight style={styles.button}
onPress={this.testfunc.bind(this, 20)}
underlayColor='#99d9f4'>
<Text style={styles.buttonText}> 20 Test</Text>
 </TouchableHighlight>

Which calls the the function:

testfunc(i) {

  window['this.state.indicator_' + i ] = 'test'

  console.log(this.state.indicator_20)
...

When i debug it in the Browser it states that the console.log(this.state.indicator_20) is undefined.

It seems it does not work with this.state... Does anyone know how to solve such a problem?

• javascript
• mobile
• react-native
• state

2 Answers 2

First, you should never have to refer to window in React Native. Consider that a red flag.

Second, you cannot evaluate the properties on objects in this fashion: window['this.state.indicator_' + i ]. You refer to a property called "foo" on an object called "bar" thusly: bar['foo'] and you cannot reference any deeper (that is, no bar['foo.baz']).

Anyway, react provides setState for this:

testfunc(i) {
  const update = {};

  update['indicator_' + i] = 'test';

  this.setState(update);
}

Then refer to this.state.indicator_X in your render, and it'll update as expected.

The solution is: this.state['tapped_' + i] or this.state['tapped_${i}']