Comments (2)
not related to this library try this code without using your other libs
'use client';
import { useEffect } from 'react';
import Image from 'next/image';
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectTrigger,
SelectValue,
} from '@/components/ui/select';
import useSWR from 'swr';
import { useForm, Controller } from 'react-hook-form';
import {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
} from '@/components/ui/form';
import Skeleton from 'react-loading-skeleton';
import 'react-loading-skeleton/dist/skeleton.css';
const fetcher = (...args) => fetch(...args).then((res) => res.json());
export default function Home() {
const { data, isLoading } = useSWR(
'https://run.mocky.io/v3/ab7d7e0e-899b-41a7-bd17-00e92fa1b446',
fetcher
);
const form = useForm({
defaultValues: {
fruit: data?.fruit,
},
});
console.log('page render...')
useEffect(() => {
if (data) {
console.log('data', data?.fruit);
form.reset({ fruit: 'apple' });
}
}, [data]);
if (isLoading) {
return <Skeleton count={5} />;
}
return (
<main className="flex min-h-screen flex-col items-center justify-between p-24">
<Controller
control={form.control}
name="fruit"
render={({ field }) => {
console.log('field.value', field.value)
return null
}}
/>
</main>
);
}
from react-hook-form.
Hello, @devevignesh .
How about changing it like the code below?
const fetcher = (...args) => fetch(...args).then((res) => res.json());
const HomeForm = ({ fruit }: { fruit: string }) => {
const form = useForm({
defaultValues: {
fruit,
},
});
return (
<main className="flex min-h-screen flex-col items-center justify-between p-24">
<Form {...form}>
<form className="space-y-8">
<FormField
control={form.control}
name="fruit"
render={({ field }) => (
<FormItem>
<FormLabel>Username</FormLabel>
<FormControl>
<Select onValueChange={field.onChange} {...field}>
<SelectTrigger className="w-[180px]">
<SelectValue placeholder="Select a fruit" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectLabel>Fruits</SelectLabel>
<SelectItem value="apple">Apple</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
<SelectItem value="blueberry">Blueberry</SelectItem>
<SelectItem value="grapes">Grapes</SelectItem>
<SelectItem value="pineapple">Pineapple</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</FormControl>
<pre>{JSON.stringify(field, null, 2)}</pre>
</FormItem>
)}
/>
</form>
</Form>
</main>
);
};
export default function Home() {
const { data, error, isLoading } = useSWR(
'https://run.mocky.io/v3/ab7d7e0e-899b-41a7-bd17-00e92fa1b446',
fetcher
);
if (error) {
return <div>Error</div>;
}
if (isLoading) {
return <Skeleton count={5} />;
}
return <HomeForm fruit={data.fruit} />;
}
from react-hook-form.
Related Issues (20)
- issue: Form-level `disabled` doesn't affect uncontrolled inputs that aren't rendered immediately HOT 1
- issue: Fields dirty state is not updated when passing values to useForm since 7.51.0 HOT 8
- Validate all Form Fields in Parallel on Submit when criteriaMode is set to 'all' HOT 2
- Submit the form outside the form (imperative submission) HOT 2
- issue: Async defaultValues function overwrites values in React.StrictMode
- issue: Default values set by resetting are discarded when register has not been called yet.
- issue: useFieldArray doesn't retain provided values when appending
- issue: `setValue` with object array makes lost of reference
- Allow JSX to be returned as an error message HOT 5
- Trigger of the field in which the rules have changed HOT 2
- issue: React hook form doesn't seem to support input on one field causing errors on another field e.g yup validation with when clauses HOT 1
- issue: useFieldArray fields state not refreshing HOT 3
- issue: handleSubmit doesn't respect Zod schema transformations in TypeScript HOT 4
- issue: Field array did note render item when it's empty string HOT 1
- issue:
- issue: getValidateError loses messages if an array is returned HOT 2
- feature request: attaching custom data to server errors HOT 2
- issue: `field.ref` recreated on each render HOT 2
- issue: validation error on submit using a required field and useFieldArray HOT 2
- issue: Default Values are returning as undefined when using <Controller /> component HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-hook-form.