CODEWITHSUNDEEP
react-nativeconditional-rendering
Diogo Carvalho
Diogo Carvalho

Reputation: 255

React Native conditional rendering not working

I want to have a side menu, with a list of categories and when the user selects a category, it should open a scrollable list, right below the category name, with all the pieces of that category.

So I created two list components, one for the categories (SideMenuList) and one for the furniture pieces. I figured I needed to use conditional rendering to render the second list when the user selects the category.

My code:

Side menu code from app.js

state = {
  hideMenu: null,
  hideList: null
}

sideMenuShow() {

     if(!this.state.hideMenu) {
        return(
        <SideMenu> 
          <MenuButton onPress = {() => this.setState({hideMenu: true})}/>
          <Text style = {{color: 'white', fontSize: 16, fontWeight: 'bold'}}>Furniture</Text>
          <SideMenuList onPress = {() => this.setState({hideList: true})}>
            {
              this.state.hideList ? console.log('yes') : null
            }
          </SideMenuList>
        </SideMenu>
        ); 
      }
     else {
         return(
          <SmallSideMenu> 
            <MenuButton onPress = {() => this.setState({hideMenu: false})}/>
          </SmallSideMenu>
         );
     }
 }

SideMenuList.js

import React, { Component } from 'react';
import { View, FlatList, Text, TouchableOpacity } from 'react-native';
import { CardSection } from './common';
import SideMenuItem from './SideMenuItem';

class SideMenuList extends Component {

render()  {
    return (
        <View style = {{flex: 1}}>
          <FlatList
            style = {{marginBottom: 2}} 
            data={[
            {key: 'Test'},
            {key: 'Test2'},
            {key: 'Test3'},
            {key: 'Test4'},
            {key: 'Test5'}
            ]}
          renderItem={({item}) => 
          <TouchableOpacity>
              <SideMenuItem 
              onPress = {this.props.onPress}
              text={item.key}
              >
              {this.props.children}
              </SideMenuItem>
          </TouchableOpacity>}
        />
      </View>
    );
  }
}

export default SideMenuList;

SideMenuItem.js code

import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';

const SideMenuItem = (props, {onPress}) => {
return (  
  <View 
  style = {{flex: 1}}>
  <TouchableOpacity
  onPress = {onPress}>
    <Text style={styles.itemStyle}>{props.text}</Text>
  </TouchableOpacity>
  {props.children}
  </View>
);
}

const styles = {
  itemStyle: {
    marginTop: 10,
    marginRight: 20,
    marginLeft: 10,
    color: 'white' 
   }
};

export default SideMenuItem;

My problem right now is that my onPress event is not changing the value of my state property 'hideList', so I can't even check if my solution would actually work. I'm doing a console log when the value is true but it never appears in my console.

Thanks in advance.

Upvotes: 1

Views: 505

Answers (1)

soutot
soutot

Reputation: 3671

You are rendering your SideMenuItem with a TouchableOpacity wrapping it (in your SideMenuList file).

Probably when you are pressing the button, it's triggering SideMenuList button, instead of SideMenuItem button.

Try to remove the TouchableOpacity from SideMenuList and check if it works.

Hope it helps

Upvotes: 1

Related Questions