React Native conditional rendering not working

Question

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.

soutot · Accepted Answer · 2018-04-11 16:26:46Z

1

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

answered Apr 11, 2018 at 16:26

soutot

3,6511 gold badge23 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Diogo Carvalho Over a year ago

Thanks, I didn't notice that! Makes sense, but I'm still not getting anything from the console.log

soutot Over a year ago

can you try adding a console.log(this.props.onPress) on both SideMenuLIst and SideMenuItem files?

Diogo Carvalho Over a year ago

Sorry I couldn't answer sooner. log on both components: onPress() { return _this2.setState({ hideList: true }); }

Diogo Carvalho Over a year ago

I figured it out. In the SideMenuItem.js I should only have receive props and then access onPress through props.onPress. Thanks for you help, I got there through the console.log!

Collectives™ on Stack Overflow

React Native conditional rendering not working

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related