Untitled

import React from 'react';
import { Formik, Field, Form, ErrorMessage } from 'formik';
import * as Yup from 'yup';
import axios from 'axios';

const SearchForm = () => {
  const initialValues = {
    searchTerm: '',
  };

  const validationSchema = Yup.object({
    searchTerm: Yup.string().required('Please enter a search term'),
  });

  const handleSubmit = async (values, { setSubmitting }) => {
    try {
      const response = await axios.get('https://api.yelp.com/v3/businesses/search', {
        headers: {
          Authorization: 'Bearer YOUR_YELP_API_KEY',
        },
        params: {
          term: values.searchTerm,
          location: 'YOUR_LOCATION',
        },
      });

      // Handle the Yelp API response
      console.log(response.data.businesses);
    } catch (error) {
      console.error('Error fetching data from Yelp API:', error);
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit}>
      <Form>
        <label htmlFor="searchTerm">Search Term:</label>
        <Field type="text" id="searchTerm" name="searchTerm" />
        <ErrorMessage name="searchTerm" component="div" />

        <button type="submit">Search</button>
      </Form>
    </Formik>
  );
};

export default SearchForm;