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

Question

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>

I dont know why but modal doesnt work in the expo but you can see the all code.Screens>foodjs> https://snack.expo.io/@ibrahimyolbir/b82615 — Ibrahim Yolbir, Feb 03 '20 at 11:40
Hi @GauravRoy i changed the code you can see here the latest code if you have time thanks. https://snack.expo.io/@ibrahimyolbir/e48b05 — Ibrahim Yolbir, Feb 04 '20 at 10:59

Dipesh KC · Accepted Answer · 2020-02-04T15:22:03.423

1

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

edited Feb 04 '20 at 15:22

answered Feb 03 '20 at 15:42

Dipesh KC

2,273
1
15
19

Hi Dipesh! Thank you very much for your help. I applied it as you wrote. But it brings wrong ID every time. I have added new images above 1. view of json data file 2. food screen – Ibrahim Yolbir Feb 03 '20 at 19:52
Everything is working fine now, only there is a problem that comes to me the information of the categories(Parents) right now. I need child's information. "id": "94905070-bc1d-11e9-b1f7-61a58a76a9a8", "name": "PIZZA", "food": [ { "id": "61a58a76a9a82", "name": "Margherita", "price": "89", "description": "Tomatsås, mozzarella, parmesanost" }, – Ibrahim Yolbir Feb 03 '20 at 20:26
what is your latest code right now.Provide expo link. – Dipesh KC Feb 04 '20 at 04:02
here is the latest code https://snack.expo.io/@ibrahimyolbir/e48b05. I understand what is the problem. It takes first the parent as an index. In my incoming data, there are food categories in the menu and below it are food types.{"menus": [{"id": "1","name": "PIZZA","food": [ {"id": "61a58a76a9a82","name": "Margherita","price": "89", "description": "Tomatsås, mozzarella, parmesanost"}, Here I need to take the parent's index of the food type and then get the child's – Ibrahim Yolbir Feb 04 '20 at 10:52
so the problem is fixed? – Dipesh KC Feb 04 '20 at 13:37
No because i take here this.state.menus[this.state.selectedPost] this is categories(menus-PIZZA) index. i need to foods(MARGHERITA) index – Ibrahim Yolbir Feb 04 '20 at 13:45
There is no items in menus state right now in your code.You could push your latest working code so that i could test myself and help you – Dipesh KC Feb 04 '20 at 13:57
https://snack.expo.io/@ibrahimyolbir/respay Yes because the data coming from the server. I did put some data as array you can check the code now. As i said before modal doesnt work in the expo. But when you cliecked a item you can see the currentdata.name below . – Ibrahim Yolbir Feb 04 '20 at 14:29
Helllo Ibrahim,As far as I have understood your question,you want Pizza information and Pasta Piemontese information inside modal when you click Pasta Piemontese.Am I right? – Dipesh KC Feb 04 '20 at 14:40
If that is the case...I have implemented logic you needed.Here is expo link(https://snack.expo.io/By_QVbPMI) – Dipesh KC Feb 04 '20 at 14:48
OMG. amazing. Thank you very very very much. @Dipesh I just needed to show child information. Now its working prefect. – Ibrahim Yolbir Feb 04 '20 at 15:07
Glad to help you.Cheers :) – Dipesh KC Feb 04 '20 at 15:11
Hi @Dipesh . If you have time. i want ask a question on the same topic – Ibrahim Yolbir Mar 03 '20 at 13:03
@IbrahimYolbir sorry for the late reply.I didn't notice it till today.Do you have any question still? – Dipesh KC Mar 14 '20 at 05:28
Yes the problem continus. I would be grateful if you. have time and help me – Ibrahim Yolbir Mar 16 '20 at 12:56

Denis Bykov · Answer 2 · 2020-02-04T21:25:18.460

0

U missed the key from mapped array in a ListItem component. Add it as a prop key={Index} . Also U need item from map as argument in ur onPress, cuz u need to push visited/selected elements to the state. {()=>this.openModal(itemFromMap)} And then u can manipulate with data like u need. As I can understood u have array of objects. Object.keys(itemFromMap).map(... And return data to the needed part of ur modalInnerContainer.

edited Feb 04 '20 at 21:25

answered Feb 03 '20 at 17:15

Denis Bykov

23
6

Hi Denis! I did what you said but I will be very happy if you explain what I have to do next – Ibrahim Yolbir Feb 03 '20 at 19:53
Now its coming data but not needed data you can check my code here snack.expo.io/@ibrahimyolbir/e48b05. Screens>FoodScreensjs and . I have screenhoots for the my jsondata and view food screen – Ibrahim Yolbir Feb 04 '20 at 10:54
No.Now the problem is; It takes first the parent as an index. In my incoming data, there are food categories in the menu and below it are food types. I want show Food types (child for the categories for ex: PIZZA are the one category and Margherita child for PIZZA) informations in the modal – Ibrahim Yolbir Feb 04 '20 at 11:29
I ve just updated my answer. Try and let me know if it’s solve the problem. – Denis Bykov Feb 04 '20 at 21:31

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

2 Answers2