/
index.tsx
47 lines (42 loc) · 1.28 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
import React from 'react';
import { createRoot } from 'react-dom/client';
import { useAtom } from 'jotai/react';
import { atomWithValidate } from 'jotai-form';
import { z } from 'zod';
const emailSchema = z.string().email();
const emailAtom = atomWithValidate('demo@jotai.org', {
validate: (email) => {
try {
emailSchema.parse(email);
return email;
} catch (err: any) {
// We catch the original and pull out the array of issues
// to render
// you can also just pick the first one and throw that again
throw err.issues;
}
},
});
const App = () => {
const [state, setValue] = useAtom(emailAtom);
return (
<>
<span>{state.isDirty && '*'}</span>
<input
value={state.value}
onChange={(e) => setValue(e.target.value as any)}
/>
<span>{state.isValid && 'Valid'}</span>
{!state.isValid &&
// Since there's no way for error to inherit itself, this becomes necessary
((state.error as any[]) || []).map((issue: any, errIndex: number) => (
// eslint-disable-next-line react/no-array-index-key
<span key={`error-${errIndex}`}>{`${issue.message}`}</span>
))}
</>
);
};
const elm = document.getElementById('app');
if (elm) {
createRoot(elm).render(<App />);
}