Making axios call in render does not return anything

I am making an axios call in the render of my react native app.

render() {
    return (
      <View style={{flex: 1, backgroundColor: 'white'}}>
        <ScrollView
          style={styles.scrollView}
          contentContainerStyle={{justifyContent: 'center'}}>
          <Text style={styles.heading}>Checked Out Books</Text>
          {this.state.books.map((book) => {
            axios
              .get('http://localhost:3000/books/id/' + book)
              .then((res) => {
                console.log(res.data);
                return (
                  <View>
                    <Image
                      source={{uri: res.data.cover}}
                      height={150}
                      width={110}></Image>
                    <Text>{res.data.title}</Text>
                  </View>
                );
              })
              .catch((err) => {
                console.log(err);
                alert('Something went wrong.');
              });
          })}

When the call finishes and it gets to the return step, nothing is returned.

I don't know why this is happening. This segment of code is not returned:

<View>
  <Image
      source={{uri: res.data.cover}}
      height={150}
      width={110}></Image>
      <Text>{res.data.title}</Text>
</View>

Why is this?



Read more here: https://stackoverflow.com/questions/67943242/making-axios-call-in-render-does-not-return-anything

Content Attribution

This content was originally published by Raghav Herugu at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: