GPT

Component Implementation

import { useState } from 'react' import { useUsers } from '../hooks/useUsers' export function Users() { const { users, isLoading, error, createUser, updateUser, deleteUser } = useUsers() const [newUser, setNewUser] =

Prompt text

Original English text. Replace placeholders with your own details.

import { useState } from 'react'
import { useUsers } from '../hooks/useUsers'

export function Users() {
 const { users, isLoading, error, createUser, updateUser, deleteUser } = useUsers()
 const [newUser, setNewUser] = useState({ email: '', name: '' })

 if (isLoading) return <div>Loading...</div>
 if (error) return <div>Error: {error.message}</div>

 const handleSubmit = (e: React.FormEvent) => {
 e.preventDefault()
 createUser(newUser)
 setNewUser({ email: '', name: '' })
 }

 return (
 <div>
 <h2>Users</h2>

 <form onSubmit={handleSubmit}>
 <input
 type="email"
 placeholder="Email"
 value={newUser.email}
 onChange={(e) => setNewUser({ ...newUser, email: e.target.value })}
 required
 />
 <input
 type="text"
 placeholder="Name"
 value={newUser.name}
 onChange={(e) => setNewUser({ ...newUser, name: e.target.value })}
 />
 <button type="submit">Add User</button>
 </form>

 <ul>
 {users?.map((user) => (
 <li key={user.id}>
 {user.name} ({user.email})
 <button onClick={() => deleteUser(user.id)}>Delete</button>
 </li>
 ))}
 </ul>
 </div>
 )
}

Source & attribution

Instructa AI Prompts · Instructa AI Prompts

Source-listed license: CC-BY-4.0. Prompt text is preserved; titles and previews may be shortened for display. Source examples are not NexGateHub test results.

View original source ↗ · Source credits & licenses

Explore more prompts →