How to pass input from React Form to Axios get request and display the request result?

Question

I am trying to take input from a user and pass that input into an axios get, when this is done the resultant information is passed into an array that will be displayed as cards.

I am having an issue where the code below is compiling but when enter values into the form fields and press submit, nothing occurrs. Nothing shows up in the web console either.

Where abouts am I going wrong?

const initial_state = {
  location: "",
  cuisine: "",
  searchResults: []
};


class SearchMealForm extends Component {
  constructor(props) {
    super(props);
    this.state = { ...initial_state };
  }
  //handle user input and inject it into yelp api get request
  handleSubmit = event => {
    event.preventDefault();
    const { location, cuisine, searchResults} = this.state;
    this.props.onFormSubmit(this.state(location, cuisine, searchResults));
    axios.get(`https://api.yelp.com/v3/businesses/search?location=${location}+IE&categories=${cuisine}`)
    .then(response => this.setState({searchResults}))
  };

  handleChange = event => {
    this.setState({ [event.target.name]: event.target.value });
  };

  //YELP http api get request
  searchYelpRestaurants = (location, cuisine, searchResults) => {
    axios
      .get(
        `https://api.yelp.com/v3/businesses/search?location=${location}+IE&categories=${cuisine}`,
        {
          headers: {
            Authorization: `Bearer ${process.env.REACT_APP_API_KEY_YELP}`
          }
        }
      )
      .then(res => this.setState({ searchResults: res.data.businesses }));
  };

  render() {
    const { location, cuisine } = this.state;

    //create cards with the results from the Yelp API GET
    const YelpSearchResults = this.state.searchResults.map(result => {
      return (
        <div className="ResultCard">
          <Card style={{ width: "18rem" }}>
            <Card.Img variant="top" src={result.image_url} />
            <Card.Body>
              <Card.Title>{result.name}</Card.Title>
            </Card.Body>
            <ListGroup className="list-group-flush">
              <ListGroupItem>{result.categories}</ListGroupItem>
              <ListGroupItem>{result.rating}</ListGroupItem>
            </ListGroup>
            <Button variant="primary">Book restaurant</Button>
          </Card>
        </div>
      );
    });
    // return YelpSearchResults;
    // }

    return (
      <React.Fragment>
        <div className="SearchMeal">
          <Form onSubmit={this.handleSubmit}>
            <Form.Row>
              <Form.Group as={Col}>
                <Form.Label>City</Form.Label>
                <Form.Control
                  name="location"
                  type="text"
                  value={location}
                  onChange={this.handleChange}
                  placeholder="location"
                />
              </Form.Group>
            </Form.Row>
            <Form.Row>
              <Form.Group as={Col}>
                <Form.Label>Cuisine</Form.Label>
                <Form.Control
                  name="cuisine"
                  type="text"
                  value={cuisine}
                  onChange={this.handleChange}
                  placeholder="cuisine"
                />
              </Form.Group>
            </Form.Row>
            <Button>Submit</Button>
            <Button>Clear</Button>
          </Form>
        </div>

        {YelpSearchResults}
      </React.Fragment>
    );
  }
}

export default SearchMealForm;

score 1 · Answer 1 · answered Nov 08 '19 at 11:42

1

here Button type should be specified as submit

        <Button type="submit">Submit</Button>

in order for form submit to work!

answered Nov 08 '19 at 11:42

Avinash

1,864
2
21
27

duuh, how did I forget that, something so simple the form now submits the input. thanks – Aindriu Nov 08 '19 at 12:01

score 0 · Answer 2 · answered Nov 08 '19 at 13:37

I would refactor your component to be functional

import React, { useState } from "react";
import ReactDOM from "react-dom";
import axios from "axios";
import {
  Col,
  Form,
  Card,
  Button,
  ListGroup,
  ListGroupItem
} from "react-bootstrap";

const initial_state = {
  location: "",
  cuisine: "",
  searchResults: []
};

const SearchMealForm = ({ onFormSubmit = () => {} }) => {
  const [state, setState] = useState(initial_state);
  //handle user input and inject it into yelp api get request
  const handleSubmit = async event => {
    event.preventDefault();
    const { location, cuisine } = state;
    onFormSubmit(state);
    const searchResults = await searchYelpRestaurants({ location, cuisine });
    setState({ ...state, searchResults });
  };

  const handleChange = event => {
    setState({
      ...state,
      [event.target.name]: event.target.value
    });
  };

  //YELP http api get request
  const searchYelpRestaurants = async ({ location, cuisine }) => {
    try {
      const { data: { businesses: searchResults } = {} } = await axios.get(
        `https://api.yelp.com/v3/businesses/search?location=${location}+IE&categories=${cuisine}`,
        {
          headers: {
            Authorization: `Bearer dBMqyRFmBBg7DMZPK9v3rbGHmrLtlURpNUCJP6gbYHtyHTmboF-Mka-ZkHiDNq-G9ktATohJGD5iKQvelOHg3sDorBDiMgnsaa8SzTH8w6hjGQXlaIexDxFlTW3FXXYx`
          }
        }
      );
      return searchResults;
    } catch (err) {
      console.error(err);
    }
    return [];
  };

  const { location, cuisine, searchResults } = state;

  //create cards with the results from the Yelp API GET
  const YelpSearchResults = searchResults.map(result => (
    <div className="ResultCard">
      <Card style={{ width: "18rem" }}>
        <Card.Img variant="top" src={result.image_url} />
        <Card.Body>
          <Card.Title>{result.name}</Card.Title>
        </Card.Body>
        <ListGroup className="list-group-flush">
          <ListGroupItem>{result.categories}</ListGroupItem>
          <ListGroupItem>{result.rating}</ListGroupItem>
        </ListGroup>
        <Button variant="primary">Book restaurant</Button>
      </Card>
    </div>
  ));

  return (
    <React.Fragment>
      <div className="SearchMeal">
        <Form onSubmit={handleSubmit}>
          <Form.Row>
            <Form.Group as={Col}>
              <Form.Label>City</Form.Label>
              <Form.Control
                name="location"
                type="text"
                value={location}
                onChange={handleChange}
                placeholder="location"
              />
            </Form.Group>
          </Form.Row>
          <Form.Row>
            <Form.Group as={Col}>
              <Form.Label>Cuisine</Form.Label>
              <Form.Control
                name="cuisine"
                type="text"
                value={cuisine}
                onChange={handleChange}
                placeholder="cuisine"
              />
            </Form.Group>
          </Form.Row>
          <Button type="submit">Submit</Button>
          <Button>Clear</Button>
        </Form>
      </div>

      {YelpSearchResults}
    </React.Fragment>
  );
};

export default SearchMealForm;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

How to pass input from React Form to Axios get request and display the request result?

2 Answers2