Search code examples
react-nativeexporeact-native-modal

Multiple item data. Show the data as clicked in the dynamically modal with react-native

FOOD> PIZZA> clicking on any pizza opens a modal. I want to show the information of the pizza clicked in this modal. I looked at many similar examples but I could not get out of it. So I need help. I add some parts of the code below. At the same time, the code is available in the expo and the link below

snack.expo.io/@ibrahimyolbir/e48b05

accordion

<Accordion
  dataArray={this.state.menus}
  animation={true}
  expanded={true}
  renderHeader={this._renderHeader}
  renderContent={this._renderContent}
/>

my open modal button in the render content

onPress={this.triggerModal(food)}

_renderContent = (item) => {
  return (
    <List>
      {
        item.food.map((food, index) => {
          return (
            <ListItem style={{
              backgroundColor: "#f0f0f5",
              padding: 10,
              marginLeft: 0,
              paddingRight: 10,
              fontStyle: "italic",
              listStyleType: "none",
              flexDirection: "row",
              justifyContent: "space-between"
            }}>
              <TouchableOpacity
                onPress={this.triggerModal(food)}
                style={{
                  flexDirection: "row",
                  justifyContent: "space-between"
                }}
              >
                <Left style={{
                  maxWidth: 57
                }}>
                  <Thumbnail source={require("../assets/images/left-food-icon.png")} />
                </Left>
                <Body>
                  <Text >{food.name}</Text>
                  <Text note >{food.description}</Text>
                </Body>
                <Right>
                  <Text >{food.price} :-</Text>
                </Right>
              </TouchableOpacity>
            </ListItem>
          )
        }
        )
      }
    </List>
  );
}

MODAL

<Modal
  style={{ marginTop: 122 }}
  isVisible={this.state.display}
  visible={this.state.display}
  onSwipeComplete={() => this.setState({ isVisible: false })}
  onSwipeThreshold={1}
  swipeDirection="down"
  animationType="slide"
  onRequestClose={() => {
    Alert.alert('Modal has been closed.');
  }}>
  <View style={{ flex: 1, backgroundColor: "#fff" }}>
    <Text>Hello!</Text>
    <TouchableOpacity onPress={this.closeDisplay} style={{ marginTop: 40, marginLeft: 150 }}>
      <Text> CLOSE MODAL </Text>
    </TouchableOpacity>

    {/* <Text> {this.state.menus} </Text> */}
  </View>
</Modal>

My Json data file

Food screen

Solution

  • One of the way can be:

    1)Create a new state

    currentChildData:[],
currentParentData:[],

    2)Pass parent id and child index in onPress event

     <TouchableOpacity onPress={()=>this.triggerModal(item.id,index)}

    3)Using that passed index and parent id,we can extract relevant information about(to be clicked item) from menus state

    triggerModal = (ParentIndex,childIndex) => {
    this.setState(prevState => {
    let ParentData=[...prevState.menus].find(each=>each.id==ParentIndex)
      return {
        display: true,
        currentChildData: ParentData.food[childIndex],
        currentParentData: ParentData,
      }
    });
  }

    4)Now we have information of(to be clicked item) in our state. We then can use it like (name of item shown below) inside Modal

     <Text>{this.state.currentChildData.name}</Text>

    Working Code: https://snack.expo.io/By_QVbPMI