Newer
Older
This component is designed to fetch and display a list of days from a RESTful API on Java server. It includes functionality for filtering the data based on user input.
1. Install dependencies:
```bash
npm install axios
```
2. Import the DayList component into your React application:
```javascript
import React, { useState, useEffect } from 'react';
import axios from 'axios';
```
3. Use the DayList component in your application where needed:
```javascript
<DayList />
```
4. Customize the API endpoint:
- Update the URL in the `fetchData` function to match your API endpoint.
- Adjust the query parameters based on your API requirements.
5. Filter Data:
- Enter filter criteria in the input fields provided (field, op, value).
- Click the "Clear Filters" button to reset the filters.
- **States:**
- `days`: Stores the fetched day data.
- `filter`: Stores the filter criteria for data fetching.
- `error`: Stores error messages, if any.
- **Effects:**
- Fetches data from the API when the filter criteria changes.
- Clears error messages on successful data fetch.
- **Functions:**
- `fetchData`: Fetches data from the API based on filter criteria.
- `handleFilterChange`: Updates the filter state based on user input.
- **Rendering:**
- Displays filter input fields and a clear filters button.
- Displays a list of days with their date, max temperature, min temperature, and precipitation.
- Displays error messages if data fetching fails.