How do I bind the storeId to an onPress event in React-Native?

Question

I want to be able to render more details about a particular store when a user presses on that particular store name. Right now, I'm only rendering the store name, with the map() I'm getting all the information by importing a Config file which contains all the pertinent data. The Config file is a JSON file. Each store has an id, openingTime, closingTime, address and branchName.

My StoreList file looks like this:

import React, { Component } from 'react'
import { View } from 'react-native'
import Config from '../Config';
import StoreDetail from './StoreDetail';

class StoreList extends Component {
    constructor() {
        super();
        this.state = {
            costcoStoreList: []
        }
    }
    componentWillMount() {
        const obj = Config;
        obj.costcoThree = Object.values(obj.costcoThree)
        console.log(typeof(obj.costcoThree));
        this.setState({
            costcoStoreList: obj.costcoThree

        }) 

    }

    renderStores() {
        return this.state.costcoStoreList.map(store => 
            <StoreDetail key={store.id} 
                store={store}
            press={this.press}

            />);
    }
    render() {
        return (
            <View>
                {this.renderStores()}
            </View>
        );
    }
}

export default StoreList;

Inside my StoreDetail file, I render just the branchName.

import React, { Component } from 'react';
import { Text, TouchableWithoutFeedback, View } from 'react-native';
import { Card } from '../common';
import { CardSection }from '../common/';
import { Button } from '../common';

class StoreDetail extends Component {
    render() {
        const {branchName} = this.props.store;
    return (
            <TouchableWithoutFeedback
                onPress={() => console.log('you pressed this ' )}
            >
                <View>
                    <Card>

                        <CardSection>
                            <Text>{branchName}</Text>
                        </CardSection>
                    </Card>
                </View>
            </TouchableWithoutFeedback>

        );
    }
};

export default StoreDetail;

I would like to be able to press on a store an render additional information about that store (store hours, location etc).

I've looked at a few different questions 1 and this one 2. The second one link's answer says to pass down the click event, which I've tried, but I'm not sure how it works, even though I'm able to pass down the props and access them inside StoreDetail. I know that once I have the storeId(or branchName) linked to the onPress event, I'll be able to render additional information, but I'm not sure how to do that.

Answer 1

Add a boolean variable to state, e.g.

this.setState({isDetailVisible: false});  // set it in the constructor

Update this state in button event handler, e.g. onPress():

this.setState({isDetailVisible: true}); 

In the render function of StoreDetail

<View>
    <Card>
        <CardSection>
            <Text>{branchName}</Text>
        </CardSection>
    </Card>
    {this.state.isDetailVisible && renderDetails(); } //<-- try this
</View>

Here put your JSX for details in the function renderDetails:

renderDetails() {
return (
        <View>
            <Text>{someDetailInfo}</Text>
        </View>
    );
}