Dynamically displaying results of a DB query in React Native

Question

Here is my code

const FindFun = () =>{

      const [place, setPlace] = useState('');
      var arr = [];

      function _handlePress(){
            firebase.firestore().collection('something').where("text", "==" , 
                                                                place.place).get().then((querySnapshot) =>{
                     querySnapshot.forEach((doc) =>{
                         arr.push(doc.data());                
                      })
                    })        
                  }

    return(
        <View>         
                <Text>Insert the place</Text>
                <TextInput style={styles.place}
                    editable
                    maxLength = {100}
                    placeholder = "E.g. New York"
                    onChangeText={(text) => setPlace({place:text})}
                />
                <Button
                    title = 'Search'
                    onPress={() => _handlePress()}
                />   

              {arr.map((item, key)=>(
                <Text key={key}> { item.user } </Text>)
               )}

        </View>
    )
  }

Disclaimer

I am pretty new to React and React Native, so I am not entirely sure if the way I am doing is correct.

The Problem

Currently in my last <Text> component I am not getting any data to display.

Facts

The arr seems to be populated correctly with the DB results that I queried.

The Result

What I would like to have is a dynamic population of <Text> components with the appropriate data as soon as the query is completed. The ideas behind this is that the user clicks the button, the program gathers the data from the DB and then that data is displayed on the screen.

Any advise is greatly appreciated.

CodingMania · Accepted Answer · 2020-04-29 20:04:46Z

1

Change your var arr = [] to const [arr, setArr] = useState([]);

const handlePress = (values)=>{
            var list = [];

            firebase.firestore().collection('something').where("text", "==" , 
                                                           place.place).get().then((querySnapshot) =>{
                querySnapshot.forEach((doc) =>{ 
                        list.push(doc.data());    

                    })  
                    setArr(list);   

                })  
}

This is basically going to push all the results on a variable and then you set your arr to be the var list.

Test it out.

answered Apr 29, 2020 at 20:04

CodingMania

263 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Abdou Djellal · Accepted Answer · 2020-04-22 00:49:24Z

1

to change dynamically the data that is shown in your component, you need to add your array to the state, or else your component won't re-render even if the array is correctly updated from your firebase store.
it is the same as your "place" variable. what you need to do is like this :

const [arr,setArr] = useState([])
//.... then use setArr([...arr,newvalue])

or create a new arr and push elements inside of it , because to re-render you need to change the array and not just the elements inside the array

answered Apr 22, 2020 at 0:49

Abdou Djellal

423 bronze badges

1 Comment

Fabrizio Botalla Over a year ago

Thank you for the help, I see what you are thinking here. When I use { arr.map((item, key)=>( <Text key={key}> { item.user } </Text>) )} it only displays one of the users even though the array has two

Collectives™ on Stack Overflow

Dynamically displaying results of a DB query in React Native

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related