Recently, I made the switch to TypeScript in my NextJS project using Create T3 App. One of the components in my app involves updating the state after a Prisma mutation is performed.
I attempted to pass the setItems (which was initialized with useState) to a child component, but encountered an error:
Type error: Argument of type '(prev: Example[]) => (Example | undefined)[]' is not assignable to parameter of type 'SetStateAction<Example[]>'.
Here is the code snippet causing the issue:
interface FormProps {
setItems: Dispatch<SetStateAction<Example[]>>;
}
const Form: FC<FormProps> = ({ setItems }) => {
const [message, setMessage] = useState("");
//setItems([])
const { mutate: createExample } = api.example.createExample.useMutation({
onSuccess: (data) => {
setItems((prev) => [...prev, data]);
},
});
return (
<form
className="flex gap-2"
onSubmit={(event) => {
event.preventDefault();
createExample({
text: message,
});
setMessage("");
}}
>
<input
type="text"
placeholder="Your message..."
minLength={2}
maxLength={100}
value={message}
onChange={(event) => setMessage(event.target.value)}
/>
<button
type="submit"
className="rounded-md border-2 border-zinc-800 p-2 focus:outline-none"
>
Submit
</button>
</form>
);
};
This is how I initialized setItems on my main page:
const Demo: NextPage = () => {
const [items, setItems] = useState<Example[]>([]);
const { data: session, status } = useSession();
const user = api.example.getAll.useQuery(["getAll"], {
onSuccess: (user) => {
setItems(user.examples);
},
});
const { mutate: deleteExample } = api.example.deleteExample.useMutation({
onSuccess(example) {
setItems((prev) => prev.filter((item) => item.id !== example.id));
},
});
return (
<>
{session ? (
<>
<p>Hello {session ? session.user?.name : null}</p>
<button
type="button"
onClick={() => {
signOut().catch(console.log);
}}
>
Logout
</button>
<br />
<ul>
{user.data
? items.map((example) => (
<li>
{example.text}{" "}
<button
onClick={() => {
deleteExample({ id: example.id });
}}
>
X
</button>
</li>
))
: null}
</ul>
<br />
<Form setItems={setItems} />
</>
) : (
<button
type="button"
onClick={() => {
signIn("email").catch(console.log);
}}
>
Login with Email
</button>
)}
</>
);
};
The function correctly recognizes the type as 'Example', but throws an error due to accessing the previous state. How can I merge states while maintaining consistent types?