Render component from array values in React Native

Question

I'm trying to render component/function from array values.

Main function

const GeneratedHistory = () => {
  return (
    <View style={styles.container}>

      <View style={styles.headerWrapper}>

        <Text variant="headlineLarge" style={styles.headersText}>Historia</Text>
        <Text variant='labelMedium'>Generowane kody</Text>

      </View>

      <View style={styles.mainWrapper}>

        <ScrollView>

          {getItems()}

        </ScrollView>

</View>
 </View>

I retrieving values from Firestore and saves what i want to array named Items.

function getItems() {

  const items = [];

  try {
    firebase.firestore().collection("Generated").where("username", "==", auth.currentUser.email)
      .get().then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
          items.push({
            qrImage: doc.get("qrImage"),
            qrText: doc.get("qrText"),
            time: doc.get("time"),
          })
        });

        items.map((item) => {
          console.log(item.qrText)
        })
      });
  } catch (error) {
    alert('Error occured')
  }


}

Nextly i map the array, printing to console and trying to render function named SingleElement.

function singleElement(text) { return ( {text}

) }

Logging to console work's fine, but i can't render the function. Screen just stays white.

Taco · Accepted Answer · 2022-12-12 12:56:22Z

1

So, I have to use async function, in my case, I fetch the data when the window opens and save it to array.

useEffect(() => {
    async function fetchData() {
      todoRef
        .onSnapshot(
          querySnaphsot => {
            const items = []
            querySnaphsot.forEach((doc) => {
              const { qrImage, qrText, time } = doc.data()
              items.push({
                id: doc.id,
                qrImage,
                qrText,
                time,
              })
              setItems(items);

            })
          }
        )

    } fetchData()
  }, [])

Then I map the elements and display them in the component.

items.map((item) => {
             return <YourComponent key={item.id} text={item.qrText} time={item.time}>
              </YourComponent> 
          })
          }

edited Dec 12, 2022 at 12:56

answered Dec 6, 2022 at 18:59

Taco

352 silver badges9 bronze badges

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

Collectives™ on Stack Overflow

Render component from array values in React Native

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related