How to change value of a product based on quantity in react native

Question

I am trying to make the price of product change, when user select different weight. For example lets say user want to buy mango, default i am showing price of mango /kg, now if user change weight from 1kg to 500gm then the value should change.

I have on showing the product and drop down option to show available weights. But not sure how to change the value of the of price based on weights.

Here is my code to display list of products and weight options

PS: This is a product listing screen where i want to make the change to happen

Productlisting.js

render() {
    return (
        <View style={styles.productListingContainer}>

            <ListView
                enableEmptySections={ true }
                dataSource={ this.state.dataSource }
                renderRow={ this._renderRow } />
        </View>
    )
}

 //Rander products
  _renderRow =(rowData)=> {
        return (
            <ProductThumb { ...rowData } onPress={() => this._pressProduct(rowData.id) } />
        )
    };

Productcard.js

  //Onvalue change
  onValueChange(value: string) {
        this.setState({
            selected: value,
        });
    }

 //This is render content
 <TouchableOpacity style={ styles.row } onPress={ this.props.onPress }>
                <Image style={ styles.image } source={{ uri: rowData.imageUri }} />
                <View style={ styles.textsHolder }>
                    <Text ellipsizeMode='tail' numberOfLines={2} style={ [styles.name,stylesheet.mb4] }>{ rowData.name } </Text>

                    <View style={[{flexDirection: 'row'},stylesheet.mb4]}>
                        <Text style={ styles.prize }>$ { rowData.prize } </Text>
                        {
                            (rowData.regularPrize) ? <Text style={ styles.regularPrize }>$ { rowData.regularPrize }</Text>: null
                        }
                    </View>

                    <View style={{flexDirection: 'row',flex:1}}>

                        <View style={styles.pickerWraper}>
                            <Picker
                                mode="dropdown"
                                style={styles.picker}
                                selectedValue="200gm"
                                itemStyle={styles.pickerItem}
                                onValueChange={this.onValueChange.bind(this)}
                            >
                                <Item label="200gm" value="key0" />
                                <Item label="1kg" value="key1" />
                            </Picker>
                        </View>

                        <Button iconLeft small style={[stylesheet.pr5,stylesheet.ml5,styles.subbutton]}>
                            <Icon style={{marginRight:4, marginLeft:6,color:colors.white}}  active name="cart" />
                            <Text style={{color:colors.txt_white}}>Subscribe</Text>
                        </Button>
                    </View>
                </View>
            </TouchableOpacity>

Being a beginner to react native, and javascript framework as whole. i am really not sure what to look for to begin with. If anyone can give some pointer that will be very helpful. Thank you

Answer 1

I would solve this by basically following these steps:

1. In your render() method, you can basically set up your own variable to show the user a dynamic price. For instance, const displayPrice = !this.state.selected ? this.props.item.price : getPriceWithUnit(this.state.selected, this.props.item.price) const displayPrice = !this.state.selected ? this.props.item.price : getPriceWithUnit(this.state.selected, this.props.item.price) . Here I've checked to see if a unit has been selected (assuming the default is null). If not, then I use the default item price. If there is a saved unit that the user selected, then I use the value generated by the function below:

2. Set up a function getPriceWithUnit(unit, price) which basically converts the original price into whatever the new display price needs to be depending on the unit, where the unit is whatever you need via the selected state reference.

3. Instead of using the item price where you display it in the component, use this new variable displayPrice like <Text>{displayPrice}</Text> .

Then, whenever the user changes the value of the selected unit, it will trigger a state update. This will then cause the component to re-render, updating this variable as it does so.