Create a React app that allows a user to search entries received from the following “posts” API:
https://jsonplaceholder.typicode.com/posts
A post will have the following structure:
userId(integer)id(integer)title(string)body(string)
Requirements:
- Fetch the data just once, at initialization (this will be an in-memory search)
- Display an input field where the user will type their search term
- Searching should occur with each keystroke in the search field
- Searching should begin once the user has typed 2+ characters
- Display a list of matching posts
- A post is a “match” if the current search term is anywhere in the post’s title or body (case insensitive)
Display format:
- Display the full title of the post
- Display a 25 character excerpt of the body of the post
- If the search term is found in the body of the post, display it in the middle of the excerpt
- Otherwise, display the first 25 characters of the body
This problem combines React data fetching, controlled input handling, and in-memory filtering. You fetch the posts once on mount, store them locally, and then filter the cached list on every keystroke once the query length reaches at least two characters. A post matches when the search term appears in either the title or the body, case-insensitively. For each result, render the full title and a 25-character body excerpt, centering the matched term in the excerpt when the match occurs in the body; otherwise, show the first 25 characters of the body.
