CODEWITHSUNDEEP
javascriptreact-native
nadeshoki
nadeshoki

Reputation: 371

Using loop to render images and updating state and displaying the state value inside the rendered image

I need to do two things:

1.use a loop

I am using this thing more than twice in my code:

<Image
 source={require('./Images/ballline.png')}
  style={styles.ballStyle} >
    
<Text style={{ fontSize: 28, color: 'white', marginLeft: 8 }}>
    
      {this.state.display}
    
</Text>
    
</Image>

So what I did is I created a function using for loop to use it 6 times

My function is like this: 

displayBalls() {

 
for (let i = 0; i <= 5; i++) {
     
return (
    
<Image
    
source={require('./Images/ballline.png')}
    
style={styles.ballStyle} >
    
<Text style={{ fontSize: 28, color: 'white', marginLeft: 8 }}>
  
{this.state.display}
    
</Text>
    
</Image>
    
);
  
}

}

Then inside render I did this:

<View style={{ flexDirection: 'row', flex: 1, marginTop: 200 }}>
    {this.displayBalls([0])}
</View>

But the problem is that only 1 image is shown but what i need to display is 6 images

  1. I want to update state at each button press and store these updated values in those images its like displaying data in a field

For that I created a state array

but the problem is I want to display the value of state in the fields like : 1st button press the updated state in 1st field then on second button press the updated state in 2nd field.

This is my full code: 

export default class gameScore extends Component {

state = {
  totalruns: 0,
  wickets: 0,
  display: [],
  Triggered: false
}


randomResultFunc() {
result = (Math.floor(Math.random() * (15 - 0)) + 0);
console.log('result----> ' + result);
}

checkResult() {
console.log('checkResult');
  switch (result) {

case 0:
case 1:
case 2:
case 3:
case 4:
case 5:
case 6:
console.log('checkResult 6');
this.setState({ totalruns: this.state.totalruns += result, display: result });
break;

case 7:
console.log('checkResult 7');
this.setState({ totalruns: this.state.totalruns += 2, display: 2 });
break;

case 8:
console.log('checkResult 8');
this.setState({ totalruns: this.state.totalruns += 1, display: 1 });
break;

case 9:
console.log('checkResult 9');
this.setState({ totalruns: this.state.totalruns += 4, display: 4 });
break;

case 10:
console.log('checkResult 10');
this.setState({ totalruns: this.state.totalruns += 6, display: 6 });
break;

case 11:
case 12:
case 13:
case 14:
case 15:
console.log('checkResult 15');
this.setState({ wickets: this.state.wickets += 1, display: 'W' });
break;

default:
console.log('default');
break;

  }
}

displayFunc() {
  this.randomResultFunc();
  this.checkResult();
}

displayBalls() {

 for (let i = 0; i <= 5; i++) {
     return (
    <Image
    source={require('./Images/ballline.png')}
    style={styles.ballStyle} >
    <Text style={{ fontSize: 28, color: 'white', marginLeft: 8 }}>
    {this.state.display}
    </Text>
    </Image>
    );
  }
}
  render() {
    console.log('State', this.state);
    return (
<Image
  source={require('./Images/bg_inner.png')}
  style={styles.backgroundStyle}>

<View style={{ marginTop: 100 }}>
 <Text style={styles.scoreStyle}>
  {this.state.totalruns}{'  /  '}{this.state.wickets}
 </Text>
</View>

<View style={{ marginTop: 50 }}>
<Button
 title='PRESS ME'
 onPress={() => { this.displayFunc(); }} />
</View>

<View style={{ flexDirection: 'row', flex: 1, marginTop: 200 }}>
    {this.displayBalls([0])}
</View>

</Image>

    );
  }
}

Upvotes: 0

Views: 80

Answers (1)

Revi
Revi

Reputation: 86

Can you supply some more info? Or the full code ? (You said something about buttons, but I don't see any buttons or click handlers..)

Where do you update the state?

Plus - in your for loop, you are returning a single item in the first iteration, that means the loop only have one iteration thus returning a single item

UPDATE:

a few things that seem to cause your code not to work - You have a bit of confusion, I think you meant to do something like that - 

randomResultFunc() {
        return (Math.floor(Math.random() * (15 - 0)) + 0);
    }

displayFunc() {
        const result = this.randomResultFunc();
        this.checkResult(result);
    }

In you displayBalls function you will always display the same text next to each ball (is that what you want ?), and for it to display 5 balls it should be written like so - 

displayBalls() {

const balls = [] 
 for (let i = 0; i <= 5; i++) {
     balls.push(
    <Image
       source={require('./Images/ballline.png')}
       style={styles.ballStyle} >
       <Text style={{ fontSize: 28, color: 'white', marginLeft: 8 }}>
          {this.state.display}
       </Text>
    </Image>
    );
  }

return balls
}

*display is initially defined as array, but you always set it to a single value..

**another general note - You should really set the totalruns value with this.state.totalruns + result, and not this.state.totalruns += result , as you do not want to modify the state directly, but by using the setState function

BTW - I'm not really sure I'm following your intention fully, but I hope I was able to help somehow..

Upvotes: 3

Related Questions