React native RENDER METHOD

// steps to handle props data in component's render method

 render() {

        let ratingData = this.props.productReviews.aggregatedRating;

        if(ratingData === undefined ){

            productRating = "";      

        }

        else {

        productRating = ratingData;

        }  

        const REVIEWS = this.props.productReviews;

        if (!REVIEWS || REVIEWS.length === 0) {

            return null;        

        }

 

 

 

 const renderRatios = this.props.availableratios.map((ratios, b)=> {  

          return(

            <View>

            { ((ratios == '4:3') || (ratios == '16:9')) && 

              <View style={styles.rowMenu}>

                <Text>{ratios}</Text>

                <RadioButton 

                  status={this.props.camratio === ratios ? 'checked' : 'unchecked'}

                  value={ratios} 

                />

              </View>

            }

          </View>

          )       

      }) 

return (

        <View style={styles.container}>

<View style={styles.productReviewSectionRatings}>

             <Text style={styles.productReviewRatingText}>{productRating.reviewCount} 

Reviews </Text>

         </View>

<FlatList

            data={REVIEWS.review}

            renderItem={this.renderItem}

            keyExtractor={this.keyExtractor}                   

            onRefresh={this.handleRefresh}

            refreshing={this.state.refreshing}

            onEndReached={this.handleLoadMore}

            onMomentumScrollEnd={this.onMomentumScrollEnd}

            onMomentumScrollBegin={this.onMomentumScrollBegin}

            onEndReachedThreshold={50}

          />

  <ScrollView style={styles.cameraRatioMenu}>

             {renderRatios}                     

         </ScrollView>

 

        </View>

 )

} 

keyExtractor = (item, index) => index.toString();

renderItem = ({ item, index }) => (    

    <View style={styles.reviewRender}>    

        <View key={index} style={styles.renderAllReviews}>

          <View style={styles.productReviews}>

                <View style={styles.productReviewRow}>

                    <View style={styles.productReviewSubStar}>

                        <Text style={styles.productReviewSubject}>

                            Subject

                        </Text>

                        <View style={styles.productReviewStar}>                            

                            <Icon

                            name={ item.reviewRating > 0 ? "star" : "star-border" }

                            color="rgb(255, 153, 0)"

                            size={18}

                            />

                            <Icon 

                               name={ item.reviewRating > 1 ? "star" : "star-border" }

                                size= {16}

                                color="orange"

                            />

                            <Icon 

                                name={ item.reviewRating > 2 ? "star" : "star-border" }

                                size= {16}

                                color="orange"

                            />

                            <Icon 

                                name={ item.reviewRating > 3 ? "star" : "star-border" }

                                size= {16}

                                color="orange"

                            />

                            <Icon 

                                name={ item.reviewRating > 4 ? "star" : "star-border" }

                                size= {16}

                                color="orange"

                            />

                        </View>

                    </View>

                    <View style={styles.productReviewDateName}>

                        <Text style={styles.productReviewDateNameContent}>Date</Text>

                        <Text style={styles.productReviewDateNameContent}>{item.author}</Text>

                    </View>

                </View>

                <View>

                    <Text style={styles.productReviewFeedback}> { item.review} </Text>

                </View>

            </View>

        </View>

    </View>

);