React Native fetch and render json

Question

So I just started to work with React Native and I would like to fetch some json and render some components afterwards. So I created a function loadDocument() which returns the json and a function assembleDocument() which looks like this:

function assembleDocument() {
  return new Promise((resolve) => {
    loadDocument().then((doc) => {
      const first_row = doc.paragraphs[0].rows[0].blocks
      let container

      for (let block = 0; block < first_row.length; ++block) {
        container += <HanziBlock hanzi={first_row[block].hanzi} pinyin={first_row[block].pinyin} />
      }

      resolve(container)
    });
  });
}

Everything seems to work perfectly fine and the function returns an object containing my "HanziBlock" Components. Now I only need to render it:

export default function HomeScreen() {
  let content = await assembleDocument()
  return content;
}

But here's the problem: I cannot use await outside an async function. But if I cannot wait for my content to arrive how can I render it?

export default async function HomeScreen() { }; not working? — Hagai Harari
– Hagai Harari, Commented Apr 2, 2020 at 8:55
@HagaiHarari: I tried that, but this will always result in the error "Objects are not valid as a React child" — Basti
– Basti, Commented Apr 2, 2020 at 9:32
Same result unfortunately. I got it to work now using Radovix Answer, it seems to be quite elegant without using await at all. — Basti
– Basti, Commented Apr 2, 2020 at 9:45

radovix · Accepted Answer · 2020-04-02 09:06:51Z

1

You should separate document loading and it's assembling. Maybe something like this will work for you.

constructor() {
  this.state = { doc: null };
}

componentDidMount() {
  loadDocument().then((doc) => this.setState({ doc }));
}

render() {
  if (this.state.doc === null) {
    return 'Loading';
  }

  return assembleDocument(this.state.doc);
}

answered Apr 2, 2020 at 9:06

radovix

3,3042 gold badges14 silver badges28 bronze badges

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

Collectives™ on Stack Overflow

React Native fetch and render json

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