How can a react-native component be rendered inside a fetch success response?

Issue

I'm trying to display a badge with the number of properties of each property type. The data from the API is received, but the Badge component doesn't render.

countProp = (id) => {

    fetch('http://10.0.2.2:8000/api/property/' + id).then((data) => data.json())

.then((response) => {

                ```return <Badge value={response.properties.length}/>

            });
    };

Thereafter the below function is called inside this renderItem method which serves as an array iterator to render the property types:

 renderItem = ({item}) => {

   return(

    <View>  
    ....

    ```{this.countProp(item.id)}

    </View>

    )

  }

Solution

You might find it easier to break this out into a separate component and make the api call in componentDidMount something like:

import React, { Component } from "react";
import { Text, View } from "react-native";

export default class Item extends Component {
  componentDidMount() {
    fetch("http://10.0.2.2:8000/api/property/" + this.props.id)
      .then(data => data.json())
      .then(response => {
        this.setState({ length: response.properties.length });
      });
  }

  render() {
    if (!this.state.length) {
      return null;
    }
    return (
      <View>
        <Badge value={this.state.length} />
      </View>
    );
  }
}

And then use this component passing it the id:

import Item from "./path/to/Item.js";

...

<Item id={ 7 } />

Answered By - JoshPerry