Click here to Skip to main content
15,512,502 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more: , +
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.
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900