AM
Aakash Mukherjee

Data Fetcher With Filter - Copy this React, Tailwind Component to your project

Create a React component named MyComponent that fetches data from an API endpoint provided via the apiUrl prop using Axios, manages state with React hooks, and includes a filter input to allow users to filter the data by the name property case insensitively. The component should handle loading and error states, display a list of filtered data, and validate props using PropTypes with default props for initialFilter. Include basic CSS styling and provide an example usage of the component in another file. The component structure should include data fetching in a useEffect hook, filtering logic in another useEffect hook, and an event handler for filter input changes. Create a React component named MyComponent that fetches data from an API endpoint provided via the apiUrl prop using Axios, manages state with React hooks, and includes a filter input to allow users to filter the data by the name property case insensitively. The component should handle loading and error states, display a list of filtered data, and validate props using PropTypes with default props for initialFilter. Include basic CSS styling and provide an example usage of the component in another file. The component structure should include data fetching in a useEffect hook, filtering logic in another useEffect hook, and an event handler for filter input changes. Create a React component named MyComponent that fetches data from an API endpoint provided via the apiUrl prop using Axios, manages state with React hooks, and includes a filter input to allow users to filter the data by the name property case insensitively. The component should handle loading and error states, display a list of filtered data, and validate props using PropTypes with default props for initialFilter. Include basic CSS styling and provide an example usage of the component in another file. The component structure should include data fetching in a useEffect hook, filtering logic in another useEffect hook, and an event handler for filter input changes.

Prompt
Component Preview

About

DataFetcherWithFilter - Fetch data via API, filter by name, handle loading/errors, and validate props. Built with React and Tailwind. Get code instantly!

Share

Last updated 1 month ago