Database API search and show result in List (React Native)

Question

 export class Diet extends Component {
     render() {
      return (

   <SearchBar/>
                <List>
                  <TouchableOpacity>
                    <Text>Foods</Text>
                  </TouchableOpacity>
                </List>
)}}

Hey everyone, I can't figure out the following: I am trying to search foods from the database Edamam API by the SearchBar and list them in the List, this is the link of the page: https://developer.edamam.com/food-database-api-docs how can I do this?

Answer 1

Using Axios you can use your API url and using the state you can store the data and use it.

import React, {Component} from 'react';
import {Button, Card, CardBody, Col, Input, Modal, ModalBody, ModalFooter, ModalHeader, Row, Table} from "reactstrap";
import axios from 'axios';
import {FormGroup} from "react-bootstrap";
import InputColor from "react-input-color";


class labelx extends Component {
    state = {
       labels: []
    }
    componentWillMount() {

        axios.get('http://APIURL').then(response => {
                this.setState({
                    labels: response.data.data
                })
            }).then(console.log(this.state))
        ;
    }
    render() {
        let projects = this.state.labels.map((book) => {
            return (
                <tr key={book.id}>
                    <td>{book.name}
                    </td>
                    <td style={{backgroundColor: book.color}}>{book.color}</td>
                    <td>
                        <Button color="danger" onClick={this.deleteProperty.bind(this, book.id)}>Delete</Button>
                    </td>
                </tr>
            )
        });
        return (
            <>
                <div className="content">
                    <Row>
                        <Col md="12">
                            <Card>
                                <CardBody>

                                    <div className="content">
                                        <div className="card-header">
                   
                                            <Table>
                                                <thead>
                                                <tr>

                                                    <th>name</th>
                                                    <th>color</th>
                                                    <th>Actions</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                {projects}
                                                </tbody>
                                            </Table>
                                        </div>
                                    </div>
                                </CardBody>
                            </Card>
                        </Col>
                    </Row>
                </div>
            </>
        );
    }
}


export default labelx;