I was using JavaScript so I created jsconfig.json then i copied your tsconfig.json file content remove unnecessary content and also copied and paste in vite.config.js by ignoring __dirname error i run my project and it works. Thanks 👍👍
The useLoaderData hook has a generic that allows you to apply an interface or a type. And you can write it to look like useLoaderData<IPostInterface>(). Additionally, this video is very useful. Thank you! 💌
I'm new to programming and I was struggling with importing images in TypeScript for a couple of hours. The .d.ts file with declaration of .jpg files sovled it all. Thanks!
Thanks for this! One question though, if I'm displaying the add post form and the posts in the same page, is there a way to clear the inputs when submitting?
If you want to reset your form, You'll not now rely on the default form submit. Use the useSubmit hook to do the form submittion I have this simple setup: import React from "react"; import { ActionFunctionArgs, Form, useActionData, useRouteError, useSubmit, } from "react-router-dom"; const Home = () => { const data = useActionData() as { title: string }; const submit = useSubmit(); return ( <div> <h1>Home</h1> <Form method="post"> <input type="text" placeholder="Write something..." name="title" /> <button type="submit" onClick={(e) => { e.preventDefault(); submit(e.currentTarget.form); e.currentTarget.form!.reset(); }} > Submit </button> </Form> </div> ); }; export default Object.assign(Home, { action: async ({ request }: ActionFunctionArgs) => { const formData = await request.formData(); const data = Object.fromEntries(formData.entries()); console.log(data); return null; }, ErrorElement: () => { const error = useRouteError() as any; return ( <div> <h1>Error</h1> <p>{error.statusText}</p> </div> ); }, }); In the above submit button can get the current target thus you can access the form object and reset after submission. Above still before submission you can carry out validation before submission then after successful entry you can reset your form using this simple code onClick={(e) => { e.preventDefault(); submit(e.currentTarget.form); e.currentTarget.form!.reset(); }} I hope this helps. If you need more clarification you can just ask below☺
Brother I have one more question, is it really possible to read and add data to react context in loader and action functions? since we can't use hooks inside of them. Thank you once again.
