how to conditional render multiple flatlist when some button is pressed

0
votes

When I click on button view similar item i want new flatlist to render.

this is my state

constructor(props) {
    super(props);
    //initalise state 
    this.state = {
        list: [
          {id : "1" , title: "Apple iPhone 12 (64GB) - Black", discount: "Up to 30% off", tags: "T-Shirt Shirt & more", image : "https://images-na.ssl-images-amazon.com/images/I/71fVoqRC0wL._SL1500_.jpg"},
          {id : "2" , title: "Samsung Galaxy Note 20 (64 GB) - Black", discount: "Up to 20% off", tags: "Apple Oppo & more", image : "https://cdn.mos.cms.futurecdn.net/xQKbHiPEh9JAGoXbYx3iGc-768-80.png"},
          {id : "3" , title: "One Plus 8 (64GB)", discount: "Up to 50% off", tags: "HP Dell Acer & more", image : "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSU5sP3pFlNsBesrrVAefgqabDXAkRrI_2ZXA&usqp=CAU"},
          {id : "4" , title: "Apple iPhone 11 Pro", discount: "Up to 70% off", tags: "Sony JBL & more", image : "https://images.firstpost.com/wp-content/uploads/2019/09/iPhone-11_720.jpg"},
          {id : "5" , title: "Motorola Razor 2019", discount: "Up to 15% off", tags: "Sony LG & more ", image : "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRUT3Tfy4KDkY5HutpWsX3_WFsfS-iQlC4WFw&usqp=CAU"},
          {id : "6" , title: "MI POCO F1 (128GB)", discount: "Up to 25% off", tags:"Puma Reebok & more", image : "https://www.giztop.com/media/catalog/product/cache/dc206057cdd42d7e34b9d36e347785ca/p/o/poco_f1_1.png"},
        ],
        newList: [
          {id : "1" , title: "Apple iPhone 12 (64GB) - Black", discount: "Up to 30% off", tags: "T-Shirt Shirt & more", image : "https://www.gizbot.com/img/2019/08/samsung-galaxy-note-10-india-pricing-revealed-cheaper-than-contemporaries-1565245139.jpg"},
          {id : "2" , title: "Samsung Galaxy Note 20 (64 GB) - Black", discount: "Up to 20% off", tags: "Apple Oppo & more", image : "https://cdn.mos.cms.futurecdn.net/xQKbHiPEh9JAGoXbYx3iGc-768-80.png"},
          {id : "3" , title: "One Plus 8 (64GB)", discount: "Up to 50% off", tags: "HP Dell Acer & more", image : "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSU5sP3pFlNsBesrrVAefgqabDXAkRrI_2ZXA&usqp=CAU"},
          {id : "4" , title: "Apple iPhone 11 Pro", discount: "Up to 70% off", tags: "Sony JBL & more", image : "https://images.firstpost.com/wp-content/uploads/2019/09/iPhone-11_720.jpg"},
        ],
        clicked: false
    }
  }

function which is called in view similar button

 addSomeData = () => {
    this.setState({
      list: [newList],      // new element can be an object 
      clicked: true
    })
  }

render item function containing the view similar button

renderItemsFunction = (itemData)=>{
    return (     
        <TouchableOpacity style={{flex:1}}
            /*onPress={
            ()=>{
                this.props.navigation.navigate("CategoriesProducts" , {title:itemData.item.title,});
            }
        } */
        >     
          <View style={styles.layout}>
            <Card>
              <CardItem cardBody>
                <Image source={{uri : itemData.item.image }} style={{height: 150, width: null, flex: 1, }}/>
              </CardItem>
              <CardItem>
                <Left>
                  <Body>
                    <View style={{height: 80, width: null, flex: 1, }}>
                      <Text numberOfLines={3} style={styles.titleStyle}>{itemData.item.title}</Text> 
                    </View>  
                    <View style={{ flex: 0.5}}>
                      <Text note style={styles.discountStyle}>
                        {itemData.item.discount}
                      </Text>
                      <TouchableOpacity onPress={() => this.addSomeData}>
                          <Text style={styles.SimilarItems}>View Similar</Text> 
                      </TouchableOpacity>
                    </View>  
                  </Body>
                </Left>
              </CardItem>
            </Card>
          </View>
        </TouchableOpacity>     
    )
 }

how to conditional render two flatlist. if i click on button view similar i want to show a new flatlist else other flatlist.

render() {
    return (
      <SafeAreaView style={styles.rootView}>
          <View>
            <Navbar/> 
          </View>
          <View style={{marginTop:70}}> 
            <Text style={{fontWeight:'bold', marginLeft: 10}}>We've found 25 Products</Text>  
          </View>
          { (//how to render?) ? (

            <ScrollView>            
              <FlatList  data={this.state.newList} numColumns={2} 
              renderItem={this.renderItemsFunction} /> 
            </ScrollView>
          ):(
            <ScrollView>
            <FlatList  data={this.state.list} numColumns={2} 
            renderItem={this.renderItemsFunction} /> 
           </ScrollView>
          )
          }
      </SafeAreaView> 
     );
  }
}

I am new in React Native so I apologise, i actually need some way to render a new Flatlist when button is pressed.

2
javascriptreactjsreact-nativereact-native-flatlist

2 Answers

1
votes
{this.state.clicked ? (

        <ScrollView>            
          <FlatList data={this.state.newList} numColumns={2} 
          renderItem ={this.renderItemsFunction} /> 
        </ScrollView>
      ):(
        <ScrollView>
        <FlatList data={this.state.list} numColumns={2} 
        renderItem ={this.renderItemsFunction} /> 
       </ScrollView>
      )
}
1
votes

This might help, close braces in the last () like

  <TouchableOpacity onPress={() => this.addSomeData()}> // here
      <Text style={styles.SimilarItems}>View Similar</Text> 
  </TouchableOpacity>

or use the arrow method like

  <TouchableOpacity onPress={this.addSomeData}>
      <Text style={styles.SimilarItems}>View Similar</Text> 
  </TouchableOpacity>

For rendering conditionally, you can do

{ this.state.clicked ? (...) : (...) }