To get the result of two values by adding number

Question

i'm working on dice and I just want the sum of two number which i'm getting from 2 different dice i'm getting two random number i want the sum of the 2 numbers.

   onstructor(props){

   super(props);

   this.state={

    // This is our Default number value
    NumberHolder : 1

    }

    this.state={

    // This is our Default number value
    NumberHold : 1

    }


    }

    GenerateRandomNumber = () => {
    let RandomNumber = Math.floor(Math.random() * 6) + 1 ;
    this.setState({
    NumberHolder : RandomNumber
    })
    let RandomNumber1 = Math.floor(Math.random() * 6) + 1 ;
    this.setState({
    NumberHold : RandomNumber1
    })
    }

    getDice(diceNum) {
    let diceSource = require(`./images/dice1.png`)
    if (diceNum === 2) {
    diceSource = require(`./images/dice2.png`)
    } else if (diceNum === 3) {
    diceSource = require(`./images/dice3.png`)
    } else if (diceNum === 4) {
    diceSource = require(`./images/dice4.png`)
    } else if (diceNum === 5) {
    diceSource = require(`./images/dice5.png`)
    } else if (diceNum === 6) {
    diceSource = require(`./images/dice6.png`)
     } else {
    diceSource = require(`./images/dice1.png`)
    }
    return (
    <Image style={styles.dice}source={diceSource} />
     )
     }
    getDice1(diceNum) {
    let diceSourc = require(`./images/dice1.png`)
    if (diceNum === 2) {
    diceSourc = require(`./images/dice2.png`)
    } else if (diceNum === 3) {
    diceSourc = require(`./images/dice3.png`)
    } else if (diceNum === 4) {
    diceSourc = require(`./images/dice4.png`)
    } else if (diceNum === 5) {
    diceSourc = require(`./images/dice5.png`)
    } else if (diceNum === 6) {
    diceSourc = require(`./images/dice6.png`)
    } else {
    diceSourc = require(`./images/dice1.png`)
    }
    return (
   <Image style={styles.dice1}source={diceSourc} />
   )
   }
   render() {
  // this is just for the demo purposes
  const imageSize = this.state.NumberHolder * 50


   return (
   <View style={styles.MainContainer} >
   <Text style={{ marginBottom: 10, fontSize: 20,marginTop:10 }}> 
   {this.state.NumberHolder}
   </Text>
   <Text style={{ marginBottom: 10, fontSize: 20,marginTop:20 }}> 
   {this.state.NumberHold}

    </Text>

    <View style={{flexDirection:'row'}}>
    <View style={{fleax:1,justifyContent:"flex-start",alignSelf:"flex- 
     start",    }}>
              { this.getDice(this.state.NumberHolder) }
    </View>
    <View style={{alignSelf:"flex-end",marginLeft:30,marginBottom:9}}>
    { this.getDice1(this.state.NumberHold) }
    </View>
    </View>

    <Button style={{marginTop:40}}  title="Roll again" onPress= 
    {this.GenerateRandomNumber} />
   </View>

I just want that i get the result from the 2 values by adding it. i have generated two numbers and on that basis i'm getting images i just wanted one result by adding 2 random numbers

Answer 1

I refactored all your code, and also on the generateRandom method I added a variable in the state thats called sum, now assuming you want to use that in the view, you would do so by calling {this.state.sum}

constructor(props) {
   super(props);

   this.state={
        // This is our Default number value
        NumberHolder : 1,
        NumberHold : 1,
        sum: 0
    }
}

GenerateRandomNumber = () => {
    let RandomNumber = Math.floor(Math.random() * 6) + 1;
    let RandomNumber1 = Math.floor(Math.random() * 6) + 1 ;
    let sum = RandomNumber + RandomNumber1;

    this.setState({
        NumberHolder : RandomNumber,
        NumberHold : RandomNumber1,
        sum
    });
}

getDice(diceNum) {
    diceSource = require(`./images/dice${diceNum}.png`)
    return (
        <Image style={styles.dice} source={diceSource} />
    )
}

getDice1(diceNum) {
    diceSourc = require(`./images/dice${diceNum}.png`);

    return (
        <Image style={styles.dice1} source={diceSourc} />
   )
}

render() {
    const imageSize = this.state.NumberHolder * 50

    return (
        <View style={styles.MainContainer} >
            <Text style={{ marginBottom: 10, fontSize: 20,marginTop:10 }}>{this.state.NumberHolder}</Text>
            <Text style={{ marginBottom: 10, fontSize: 20,marginTop:20 }}>{this.state.NumberHold}</Text>
            <Text style={{ marginBottom: 10, fontSize: 20,marginTop:20 }}>{this.state.sum}</Text>

            <View style={{flexDirection:'row'}}>
                <View style={{flex:1, justifyContent:"flex-start", alignSelf:"flex-start"}}>
                    {this.getDice(this.state.NumberHolder)}
                </View>
                <View style={{alignSelf:"flex-end",marginLeft:30,marginBottom:9}}>
                {this.getDice1(this.state.NumberHold)}
                </View>
            </View>

        <Button style={{marginTop:40}}  title="Roll again" onPress={this.GenerateRandomNumber} />
    </View>
}