How to return JSX from this function React/React-native

Question

I have a function from where I want to return JSX. I´m new to React, I tried this: history is array of objects and I want to return text from it and display it.

renderCard = () => { const db = firebase.firestore();

db.collection("users")
  .doc(firebase.auth().currentUser.uid)
  .collection("userRequestDeposit")
  .get()
  .then(snapshot => {
    let history = snapshot.docs.map(doc => {
      const data = doc.data().request;
      return { ...data };
    });
 

    history.forEach(elem => {
      return (
        <View>
          <Text>{elem.data}</Text>
        </View>
      );
    });
  });

};

foreach doesn't return anything, try store this array in a variable and return this variable — guilherme victor ramalho natal
– guilherme victor ramalho natal, Commented Apr 29, 2021 at 19:51

Flagship1442 · Accepted Answer · 2021-04-29 20:20:56Z

1

So this is a nice case study for how to use React.

You want to fetch this data when the component mounts. When you have the data, you will update the component's state. You can then render the output from that state.

Here is how you could do this with your code:

import {useEffect, useState} from 'react';

const YourComponent = () => {
  const [history, setHistory] = useState([]); // Store your data in this state

  // this useEffect will run only once (when the component mounts). 
  useEffect(() => {
    db.collection('users')
      .doc(firebase.auth().currentUser.uid)
      .collection('userRequestDeposit')
      .get()
      .then(snapshot => setHistory(snapshot.docs.map(doc => ({...doc.data().request}))));
  }, []); // <-- the empty dependency array means it only runs on mount

  // when history is updated, you can map over the array and render the output here
  return history.map(item => (
    <View key={item.id}>
      <Text>{item.data}</Text>
    </View>
  ));
};

or as a class component...

import {Component} from 'react';

class YourComponent extends Component {
  state = {
    history: [],
  };

  componentDidMount() {
    db.collection('users')
      .doc(firebase.auth().currentUser.uid)
      .collection('userRequestDeposit')
      .get()
      .then(snapshot => {
        this.setState({history: snapshot.docs.map(doc => ({...doc.data().request}))});
      });
  }

  render() {
    return history.map(item => (
      <View key={item.id}>
        <Text>{item.data}</Text>
      </View>
    ));
  }
}

edited Apr 29, 2021 at 20:20

answered Apr 29, 2021 at 19:52

Flagship1442

1,7362 gold badges9 silver badges15 bronze badges

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

2 Comments

Rado Pagacik Over a year ago

Nice! Is there an equivalent for class based components?

Flagship1442 Over a year ago

I've updated the answer with the class component equivalent

Collectives™ on Stack Overflow

How to return JSX from this function React/React-native

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related