Styjun

If there were no space agencies, could a person go to space?

sytemctl status log output

In Pokémon Go, why does one of my Pikachu have an option to evolve, but another one doesn't?

Unexpected route on a flight from USA to Europe

Short story about a teenager who has his brain replaced with a microchip (Psychological Horror)

Did Apollo leave poop on the moon?

Should I self-publish my novella on Amazon or try my luck getting publishers?

What does VB stand for?

Double blind peer review when paper cites author's GitHub repo for code

Is it allowed and safe to carry a passenger / non-pilot in the front seat of a small general aviation airplane?

Why do private jets such as Gulfstream fly higher than other civilian jets?

Does the Voyager team use a wrapper (Fortran(77?) to Python) to transmit current commands?

Decode a variable-length quantity

Look mom! I made my own (Base 10) numeral system!

How can glass marbles naturally occur in a desert?

How quickly could a country build a tall concrete wall around a city?

What was the first multiprocessor x86 motherboard?

Traveling from Germany to other countries by train?

What are the examples (applications) of the MIPs in which the objective function has nonzero coefficients for only continuous variables?

Is TEXT to VARCHAR(MAX) an implicit conversion?

How to help new students accept function notation

What are good ways to improve as a writer other than writing courses?

Is this cheap "air conditioner" able to cool a room?

In the movie Harry Potter and the Order or the Phoenix, why didn't Mr. Filch succeed to open the Room of Requirement if it's what he needed?

How to use map function to Mobx observable state?

How to update parent's state in React?Export and import observable MobX React NativeReacting to changes within observed object's unobserved propertiesMobX, and connection between storesStore change doesn't re-render computed function in componentreact native snap carousel tinder animation not working for multiple slides getting hangedhandleChange with React and MobxUsing mobx with redux in the same project - even in the same component/classModalFilterPicker load more on scrollHow to fix this error 'undefined is not an object'?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

0

Now I would like to use Map function to show a component with each array.

But, my code with map is not working rightly.
In firestore, there are 3 document in "food" collection but this map function can only render one document.

This is my code below in render component.

renderItemBox() 
 const store = this.props;
 const items = store.restaurantStore.Items;
 return items.map((value, index) => 
 console.log(items);
 return (
 <TouchableOpacity key=index>
 <View style=styles.itemsBox>
 <View style=styles.itemsImageBox>
 <Image
 source=require('../../assets/Images/Home/HomeListImageShop.jpg')
 style=styles.itemsImage
 />
 </View>
 <View style= flexDirection: 'row' >
 <Text style=styles.itemsName>
 value[index].name
 </Text>
 <Text style=styles.itemsTag>
 value[index].tag
 </Text>
 </View>

 <View style= flexDirection: 'row' >
 <Text style=styles.itemsDescription>
 value[index].shortDescription
 </Text>
 <TouchableOpacity
 style=styles.likeButtonBox
 onPress=this.handleLikeButton.bind(this)
 >
 this.handleLikeImage()
 </TouchableOpacity>
 </View>
 </View>
 </TouchableOpacity>
 );
 );
 

In addition to this, I set store component in my project.
This code above is importing observable state(array) from that store.

Below one is that store.

import observable, action from 'mobx';
import firebase from 'firebase';

class RestaurantStore 
 @observable Items = [];

 @action handleFirestoreCollectionOfFoods () 
 const db = firebase.firestore();
 db.collection('foods')
 .get()
 .then((snapshot) => 
 const preItems = [];
 snapshot.forEach((doc) => 
 const docData = doc.data();
 preItems.push(docData);
 );
 this.Items.push(preItems);
 )
 .catch((error) => 
 console.log(error);
 );
 


export default RestaurantStore;

Fortunetely, this store can import complete document from firestore.
I did check that with console.log.

So, does someone know how to use map function to mobx state completely?

reactjs react-native expo mobx

share|improve this question

asked Mar 27 at 6:00

ryonzryonz

10699 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  It's not related to map function. do you mark the component as observer ?!
  
  – Ehsan Majdabadi
  Mar 27 at 6:12
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Sure, and in the component with map function, I can get the observerbaleArray from mobx store. But I cannot render all of array with map
  
  – ryonz
  Mar 27 at 6:13
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Try to mock items array and check the output. I think render logic should be revised. Map and observable arrays work very well together.
  
  – Ehsan Majdabadi
  Mar 27 at 6:25
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I did that before. In that time, all of the objects in an array can be rendered by map function. I have just replaced that object array and function to import data from firestore to store component.
  
  – ryonz
  Mar 27 at 6:30
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Have you provided the instantiated const restaurantStore = new RestaurantStore() ?
  
  – samb102
  Mar 27 at 8:55
  

  
  
  
  

 | 
show 1 more comment

0

Now I would like to use Map function to show a component with each array.

But, my code with map is not working rightly.
In firestore, there are 3 document in "food" collection but this map function can only render one document.

This is my code below in render component.

renderItemBox() 
 const store = this.props;
 const items = store.restaurantStore.Items;
 return items.map((value, index) => 
 console.log(items);
 return (
 <TouchableOpacity key=index>
 <View style=styles.itemsBox>
 <View style=styles.itemsImageBox>
 <Image
 source=require('../../assets/Images/Home/HomeListImageShop.jpg')
 style=styles.itemsImage
 />
 </View>
 <View style= flexDirection: 'row' >
 <Text style=styles.itemsName>
 value[index].name
 </Text>
 <Text style=styles.itemsTag>
 value[index].tag
 </Text>
 </View>

 <View style= flexDirection: 'row' >
 <Text style=styles.itemsDescription>
 value[index].shortDescription
 </Text>
 <TouchableOpacity
 style=styles.likeButtonBox
 onPress=this.handleLikeButton.bind(this)
 >
 this.handleLikeImage()
 </TouchableOpacity>
 </View>
 </View>
 </TouchableOpacity>
 );
 );
 

In addition to this, I set store component in my project.
This code above is importing observable state(array) from that store.

Below one is that store.

import observable, action from 'mobx';
import firebase from 'firebase';

class RestaurantStore 
 @observable Items = [];

 @action handleFirestoreCollectionOfFoods () 
 const db = firebase.firestore();
 db.collection('foods')
 .get()
 .then((snapshot) => 
 const preItems = [];
 snapshot.forEach((doc) => 
 const docData = doc.data();
 preItems.push(docData);
 );
 this.Items.push(preItems);
 )
 .catch((error) => 
 console.log(error);
 );
 


export default RestaurantStore;

Fortunetely, this store can import complete document from firestore.
I did check that with console.log.

So, does someone know how to use map function to mobx state completely?

reactjs react-native expo mobx

share|improve this question

asked Mar 27 at 6:00

ryonzryonz

10699 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  It's not related to map function. do you mark the component as observer ?!
  
  – Ehsan Majdabadi
  Mar 27 at 6:12
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Sure, and in the component with map function, I can get the observerbaleArray from mobx store. But I cannot render all of array with map
  
  – ryonz
  Mar 27 at 6:13
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Try to mock items array and check the output. I think render logic should be revised. Map and observable arrays work very well together.
  
  – Ehsan Majdabadi
  Mar 27 at 6:25
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I did that before. In that time, all of the objects in an array can be rendered by map function. I have just replaced that object array and function to import data from firestore to store component.
  
  – ryonz
  Mar 27 at 6:30
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Have you provided the instantiated const restaurantStore = new RestaurantStore() ?
  
  – samb102
  Mar 27 at 8:55
  

  
  
  
  

 | 
show 1 more comment

Now I would like to use Map function to show a component with each array.

But, my code with map is not working rightly.
In firestore, there are 3 document in "food" collection but this map function can only render one document.

This is my code below in render component.

renderItemBox() 
 const store = this.props;
 const items = store.restaurantStore.Items;
 return items.map((value, index) => 
 console.log(items);
 return (
 <TouchableOpacity key=index>
 <View style=styles.itemsBox>
 <View style=styles.itemsImageBox>
 <Image
 source=require('../../assets/Images/Home/HomeListImageShop.jpg')
 style=styles.itemsImage
 />
 </View>
 <View style= flexDirection: 'row' >
 <Text style=styles.itemsName>
 value[index].name
 </Text>
 <Text style=styles.itemsTag>
 value[index].tag
 </Text>
 </View>

 <View style= flexDirection: 'row' >
 <Text style=styles.itemsDescription>
 value[index].shortDescription
 </Text>
 <TouchableOpacity
 style=styles.likeButtonBox
 onPress=this.handleLikeButton.bind(this)
 >
 this.handleLikeImage()
 </TouchableOpacity>
 </View>
 </View>
 </TouchableOpacity>
 );
 );
 

In addition to this, I set store component in my project.
This code above is importing observable state(array) from that store.

Below one is that store.

import observable, action from 'mobx';
import firebase from 'firebase';

class RestaurantStore 
 @observable Items = [];

 @action handleFirestoreCollectionOfFoods () 
 const db = firebase.firestore();
 db.collection('foods')
 .get()
 .then((snapshot) => 
 const preItems = [];
 snapshot.forEach((doc) => 
 const docData = doc.data();
 preItems.push(docData);
 );
 this.Items.push(preItems);
 )
 .catch((error) => 
 console.log(error);
 );
 


export default RestaurantStore;

Fortunetely, this store can import complete document from firestore.
I did check that with console.log.

So, does someone know how to use map function to mobx state completely?

reactjs react-native expo mobx

share|improve this question

asked Mar 27 at 6:00

ryonzryonz

10699 bronze badges

renderItemBox() 
 const store = this.props;
 const items = store.restaurantStore.Items;
 return items.map((value, index) => 
 console.log(items);
 return (
 <TouchableOpacity key=index>
 <View style=styles.itemsBox>
 <View style=styles.itemsImageBox>
 <Image
 source=require('../../assets/Images/Home/HomeListImageShop.jpg')
 style=styles.itemsImage
 />
 </View>
 <View style= flexDirection: 'row' >
 <Text style=styles.itemsName>
 value[index].name
 </Text>
 <Text style=styles.itemsTag>
 value[index].tag
 </Text>
 </View>

 <View style= flexDirection: 'row' >
 <Text style=styles.itemsDescription>
 value[index].shortDescription
 </Text>
 <TouchableOpacity
 style=styles.likeButtonBox
 onPress=this.handleLikeButton.bind(this)
 >
 this.handleLikeImage()
 </TouchableOpacity>
 </View>
 </View>
 </TouchableOpacity>
 );
 );
 

import observable, action from 'mobx';
import firebase from 'firebase';

class RestaurantStore 
 @observable Items = [];

 @action handleFirestoreCollectionOfFoods () 
 const db = firebase.firestore();
 db.collection('foods')
 .get()
 .then((snapshot) => 
 const preItems = [];
 snapshot.forEach((doc) => 
 const docData = doc.data();
 preItems.push(docData);
 );
 this.Items.push(preItems);
 )
 .catch((error) => 
 console.log(error);
 );
 


export default RestaurantStore;

share|improve this question

asked Mar 27 at 6:00

ryonzryonz

10699 bronze badges

share|improve this question

asked Mar 27 at 6:00

ryonzryonz

10699 bronze badges

asked Mar 27 at 6:00

ryonzryonz

10699 bronze badges

asked Mar 27 at 6:00

ryonzryonz

10699 bronze badges