Why is my custom component not rendering in React Native?

Question

I have created a component called OrderGuideSelect and I am trying to render it in another area of our app. The problem is the OrderGuideSelect component is not rendering. When I set up breakpoints I am able to hit inside of the renderOrderGuideOptions function but it never makes it into the OrderGuideSelect.js file. I also tried putting 'export default' in front of the class declaration instead of the connection but it didn't make a difference. Does anyone know how to get the OrderGuideSelect component rendering properly?

Here is where I call the function that renders the OrderGuideSelect component:

<TouchableOpacity onPress={() => this.renderOrderGuideOptions()}>
    <MBIcon name="ico-24-filter" size={30} style={styles.filterIcon}/>
</TouchableOpacity>

And here is the rendering function:

renderOrderGuideOptions = () => {
    return (
        <View>
            <OrderGuideSelect />
        </View>
    )
}

Here is the OrderGuideSelect.js file:

import React, {Component} from 'react';
import {View, FlatList, ActivityIndicator, StyleSheet} from 'react-native';
import {connect} from 'react-redux';
import {fetchOrderGuides} from '../../actions/AppActions';
import {orderGuideSelected} from '../../actions/ProductAction';
import Header from '../../components/Header/Header';
import {createIconSetFromIcoMoon} from 'react-native-vector-icons';
import selection from '../../selection';
import OrderGuideOption from './OrderGuideOption';

const MBIcon = createIconSetFromIcoMoon(selection);

class OrderGuideSelect extends Component {
    constructor(props) {
        super(props);
    }

    componentWillMount() {
        this.props.dispatch(fetchOrderGuides());
    }

    selectOrderGuide = id => {
        this.props.dispatch(orderGuideSelected(id));
    }

    render() {
        const {isLoading, orderGuides} = this.props.orderGuide;
        return (
            <View style={styles.wrapper}>
                <Header />
                <View style={styles.iconLine}>
                    <MBIcon name='ico-24-filter' style={styles.filterIcon} />                    
                </View>

                {isLoading &&
                    <ActivityIndicator
                        style={{alignSelf: 'center'}}
                        animating={true}
                        size='large'
                    />
                }

                {!isLoading &&
                    <View style={styles.optionList}>
                        <FlatList
                            style={styles.optionList}
                            data={orderGuides}
                            keyExtractor={(item, index) => item.id.toString()}
                            renderItem={({item}) => <OrderGuideOption guideData={item} isSelected={item.id == this.props.selectedGuide.id} onSelected={this.selectOrderGuide} />}
                        />
                    </View>
                }                
            </View>
        );
    }
}

function mapStateToProps(state){
    const {products, orderGuide} = state;
    return {
        selectedGuide: products.selectedOrderGuide,
        orderGuide
    }
}

export default connect(mapStateToProps)(OrderGuideSelect);

Also, I may be importing of the OrderGuideSelect component should be correct:

Answer 1

You can do what you want probably holding a state property in your component and show your OrderGuideOptions according to this state property.

state = { showOrderGuideOptions: false };

renderOrderGuideOptions = () =>
    this.setState( prevState => ( { showOrderGuideOptions: !prevState.showOrderGuideOptions }) );

render() {
    return (
        <View>
        <TouchableOpacity onPress={this.renderOrderGuideOptions}>
            <MBIcon name="ico-24-filter" size={30} style={styles.filterIcon}/>
        </TouchableOpacity>
        { this.state.showOrderGuideOptions && <OrderGuideSelect /> }
        </View>
    )
}

Answer 2

In your code calling this.renderOrderGuideOptions function on onPress event doesn't make sense, i.e. this.renderOrderGuideOptions returns the element but where to append it in DOM?

This should be achived using state in React. So you can set the state in onPress handler then use that state in render to show your OrderGuideOptions component.

So on onPress event bind the function handler:

<TouchableOpacity onPress={this.showOrderGuideOptions}>
    <MBIcon name="ico-24-filter" size={30} style={styles.filterIcon}/>
</TouchableOpacity>

Now this showOrderGuideOptions will set the state named showOrderGuideFunction to true.

showOrderGuideOptions(){
   this.setState({showOrderGuideFunction: true});
}

At last step use this showOrderGuideFunction state to render your component in the render function like this:

render() {
    return (
        <div>
            ...
            {
                this.state.showOrderGuideFunction &&
                renderOrderGuideOptions()
            }
        </div>
    )
}

Answer 3

I think you wanted to something similar to this

class RenderOrderGuideSelectComponent extends Component { constructor(props) { super(props); this.state={ showOrderGuideSelect : false }; }

renderOrderGuideOptions = () => { this.setState({showOrderGuideSelect: true}); }

render() { if(this.state.showOrderGuideSelect) { return ( ); } else { return ( this.renderOrderGuideOptions()}> ); } } }