1

I am currently trying to display an image with a map function that goes through a document in my firestore. My firestore document looks like this:

enter image description here

and I have a photo in my firebase storage with the same name as the photo id.

enter image description here

I am planning to use 

const ref = firebase.storage().ref(item.photoid);
const url = await ref.getDownloadURL();

with

renderAccordion() {
    return this.state.accordionarr.map((item,index) => {
      return(
        <View key={index}>
          <Accordion
            onChange={this.onChange}    
            activeSections={this.state.activeSections}
            >
            <Accordion.Panel header= {item.name}>
              <List>
                <List.Item>{item.protein}</List.Item>
                <List.Item>{item.carbohydrate}</List.Item>
              </List>
            </Accordion.Panel>
          </Accordion>          
        </View>
      );
    });
  }

to show the image. However, in order to have "await" I have to make renderAccordion() an async function. But, when I do that, I received an "invariant violation objects are not valid as a react child" error. What is a way to retrieve the image based on my document field of photoid and successfully display it on the screen?

EDIT: I've added a function to set state of each one of my photos

renderAccordion() {
    return this.state.accordionarr.map((item,index) => {
      let fetchImage
      firebase
      .storage()
      .ref(item.photoid)
      .getDownloadURL()
      .then((url) => {
        let state = {};
        state[item.photoid] = url
        this.setState(state)
      });
      return(
        <View key={index}>
          <Accordion
            onChange={this.onChange}    
            activeSections={this.state.activeSections}
            >
            <Accordion.Panel header= {item.name}>
              <List>
                <List.Item>
                  <Image
                  style = {styles.sizer}
                  source = {{uri: this.state[item.photoid]}}
                  />
                </List.Item>
                <List.Item>{item.protein}</List.Item>
                <List.Item>{item.carbohydrate}</List.Item>
              </List>
            </Accordion.Panel>
          </Accordion>          
        </View>
      );
    });
  }

But, now I received an error message that only says [object Object]. What am I doing wrong?

Jae Lee
  • 67
  • 1
  • 10
  • It is unclear how the two snippets you shared are related. But either way: if something is loaded asynchronously you'll need to store it in the state (either by calling `setState` or using the state hook). See my answer here for examples: https://stackoverflow.com/a/61192087, https://stackoverflow.com/a/52836403 – Frank van Puffelen Jun 03 '20 at 14:36
  • I've tried the solution in the second link: let fetchImage firebase .storage() .ref(item.photoid) .getDownloadURL() .then((url) => { let state = {}; state[item.photoid+"_url"] = url this.setState(state) }); But I am receiving and error message that only says [object Object]. Did I miss something? – Jae Lee Jun 04 '20 at 08:33
  • Please edit your question to show the updated code and error message. – Frank van Puffelen Jun 04 '20 at 13:55
  • 2
    @FrankvanPuffelen I've made my changes! Thanks for helping me out, I really appreciate it. – Jae Lee Jun 05 '20 at 01:51
  • to inspect the object could you use `JSON.stringify` to print it, this is to be able to see the object structure and values instead of only seeing that it is an object. – Soni Sol Jun 05 '20 at 23:39

0 Answers0