Как связать storeId с событием onPress в React-Native?

Question

Я хочу иметь возможность отображать более подробную информацию о конкретном магазине, когда пользователь нажимает на это имя конкретного магазина. Прямо сейчас я отображаю только название магазина, используя map(). Я получаю всю информацию, импортируя файл конфигурации, который содержит все необходимые данные. Файл конфигурации является файлом JSON. У каждого магазина есть идентификатор, открытие, закрытие, адрес и название филиала.

Мой файл StoreList выглядит так:

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;

Внутри моего файла StoreDetail я отрисовываю только имя-ветви.

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;

Я хотел бы иметь возможность нажать на магазин визуализации дополнительную информацию об этом магазине (часы магазина, местоположение и т. Д.).

Я посмотрел на несколько разных вопросов 1 и этот 2. Ответ второй ссылки говорит о передаче события click, которое я пробовал, но я не уверен, как оно работает, хотя я могу передать реквизиты и получить к ним доступ внутри StoreDetail. Я знаю, что когда у меня есть storeId(или branchName), связанный с событием onPress, я смогу отобразить дополнительную информацию, но я не уверен, как это сделать.

Answer 1

Добавить булеву переменную в состояние, например

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

Обновите это состояние в обработчике события кнопки, например, onPress():

this.setState({isDetailVisible: true}); 

В функции рендеринга StoreDetail

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

Здесь поместите ваш JSX для деталей в функцию renderDetails:

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