Display data from API database with flatlist

See more:

Javascript

API

ReactJS

, +

export class Diet extends Component {
  constructor(props) {
    super(props);
    this.state = {

          data: [],
      fullData: [],
      loading: false,
      error: null,
      query: "",
    };
  }

  async componentDidMount() {

      this.requestAPIFood();
  }

  requestAPIFood = _.debounce(() => {
    this.setState({ loading: true });
    const apiURL =
      "https://api.edamam.com/api/food-database/v2/nutrients?app_id=${########}&app_key=${#######}";
    fetch(apiURL)
      .then((res) => res.json())
      .then((resJson) => {
        this.setState({
          loading: false,
          data: resJson,
          fullData: resJson,
        });
      })
      .catch((error) => {
        this.setState({ error, loading: false });
      });
  }, 250);

  renderFooter = () => {
    if (!this.state.loading) return null;
    return (
      <View
        style={{ paddingVertical: 20, borderTopWidth: 1, borderColor: "red" }}
      >
        <ActivityIndicator animating size="large" />
      </View>
    );
  };

  _renderItem = ({ item, index }) => {
    return (
      <TouchableOpacity style={{ height: hp("5%") }}>
        <Text style={{ left: wp("1%") }}>{item.food}</Text>
      </TouchableOpacity>
    );
  };

  handleSearch = (text) => {
    const data = _.filter(this.state.fullData);
    this.setState({ data, query: text });
  };

  render() {

     return (

         <SearchBar
            placeholder="Search Food..."
            onChangeText={this.handleSearch}
            value={data}
          />
            <List >
              <FlatList
                data={this.state.data}
                renderItem={this._renderItem}
                keyExtractor={(item, index) => index.toString()}
                ListFooterComponent={this.renderFooter}
              />
            </List>

What I have tried:

Good evening, I'm working on a SearchBar component to search food from the API database of Edamam (this is the link to the documentation: https://developer.edamam.com/food-database-api-docs) and display the result on a FlatList as you can see above, but when I start typing nothing will appear and I really can't seem to find the error.