Code Monkey Skill - Challenge 6-10

Here’s a compact “feature” that covers 6–10 in one go:

{/* List */} <ul> {paginated.map((post) => ( <li key={post.id}> <strong>{post.title}</strong> <button onClick={() => deletePost(post.id)}>❌</button> <p>{post.body}</p> </li> ))} </ul>

import React, { useState, useEffect } from "react"; const API = "https://jsonplaceholder.typicode.com/posts"; code monkey skill challenge 6-10

// Challenge 10: Delete item const deletePost = (id) => { if (window.confirm("Delete this post?")) { setPosts(posts.filter((p) => p.id !== id)); } };

// Challenge 9: Add new item (simulated) const addPost = () => { const newPost = { id: Date.now(), title: newTitle, body: newBody, }; setPosts([newPost, ...posts]); setNewTitle(""); setNewBody(""); }; Here’s a compact “feature” that covers 6–10 in

{/* Search */} <input placeholder="Filter by title" value={filter} onChange={(e) => setFilter(e.target.value)} />

return ( <div> <h2>Feature Demo (Challenges 6–10)</h2> button onClick={() =&gt

{/* Add form */} <div> <input placeholder="Title" value={newTitle} onChange={(e) => setNewTitle(e.target.value)} /> <input placeholder="Body" value={newBody} onChange={(e) => setNewBody(e.target.value)} /> <button onClick={addPost}>Add Post</button> </div>