How can we determine the type of InertiaFormProps in Laravel Inertia?

Question

How can we determine the type of InertiaFormProps in Laravel Inertia?

I have a webpage with a useForm hook implemented, featuring a multi-step form split into separate components.

Here's an example:


    export default function create(){
    
      const form = useForm({
        name: '',
        content: '',
        is_published: 0,
        some_more_fields_here
      });
    
    
    return (
    <div>
    <GeneralPageInformation form={form} />
    
    
    <SeoInformation form={form} />
    </div>
    )
}

The form object returned by useForm appears as follows:

 InertiaFormProps<{name: string, content: string, is_published: number, rest of your fields}>

My attempt at defining this was:

interface IGeneralPageInformation {
  form: InertiaFormProps;
}

Although giving access to properties like form.processting and form.recentlySuccessful,

the keys such as name and content were not visible when using functions like

form.setData('all available keys should show up here))

I could manually include the keys like so:

interface IGeneralPageInformation {
  form:  InertiaFormProps<{name: string, content: string, is_published: number, resf of the fields}>
}

However, this manual approach is not very "scalable" since every form would need editing whenever changes occur.

typescript

Answer 1

Answer №1

When working with Vue 3,

<script setup lang="ts">
import { InertiaForm, useForm } from "@inertiajs/inertia-vue3"

const form: InertiaForm<{
                title: string,
                category: string,
                types: Array<string | number>
            }> = useForm({
                title: "",
                category: "",
                types: [],
            })
</script>

Answer 2

When working with Vue 3,

<script setup lang="ts">
import { InertiaForm, useForm } from "@inertiajs/inertia-vue3"

const form: InertiaForm<{
                title: string,
                category: string,
                types: Array<string | number>
            }> = useForm({
                title: "",
                category: "",
                types: [],
            })
</script>

Answer 3

Answer №2

To implement this in React, follow these steps:

import { InertiaFormProps } from '@inertiajs/react/types/useForm'
import { useForm } from '@inertiajs/react'

interface FormStructure {
  email: string
  password: string
}

const CustomReactForm = () => {
  // Use your defined structure as a generic like so 👇
  const { data, setData }: InertiaFormProps<FormStructure> = useForm({
    email: '',
    password: '',
  })

  return (
    <form>
      <input
        id='email'
        type='email'
        onChange={(e) => setData('email', e.target.value)}
        value={data.email}
      />
      <input
        id='password'
        type='password'
        onChange={(e) => setData('password', e.target.value)}
        value={data.password}
      />
    </form>
  )
}

export default CustomReactForm

Answer 4

To implement this in React, follow these steps:

import { InertiaFormProps } from '@inertiajs/react/types/useForm'
import { useForm } from '@inertiajs/react'

interface FormStructure {
  email: string
  password: string
}

const CustomReactForm = () => {
  // Use your defined structure as a generic like so 👇
  const { data, setData }: InertiaFormProps<FormStructure> = useForm({
    email: '',
    password: '',
  })

  return (
    <form>
      <input
        id='email'
        type='email'
        onChange={(e) => setData('email', e.target.value)}
        value={data.email}
      />
      <input
        id='password'
        type='password'
        onChange={(e) => setData('password', e.target.value)}
        value={data.password}
      />
    </form>
  )
}

export default CustomReactForm

How can we determine the type of InertiaFormProps in Laravel Inertia?

Answer №1

Answer №2

Similar questions

Quirky happenings in Typescript

Can someone assist me in creating mongoose models?

Why does Angular throw a length-related error, while I am able to retrieve the length using console log if needed?

A method for increasing a counter using only an instance of a class or function without accessing its methods or properties in Javascript

How can we include additional types for external npm packages in a React TypeScript project?

Executing an HTTP POST request without properly encoding a specific parameter

The refresh function in the table is not working as expected when implemented in a functional component. The table being used is Material

Detecting changes in Angular when the @Input() value remains the same

A guide on combining two native Record types in TypeScript

Leveraging React Hooks to display a dynamic pie chart by fetching and mapping data from an API

"An issue has been identified where TSLint and VSCode fail to display red underlines in

Issue encountered while conducting tests with Jest and React Testing Library on a React component containing an SVG: the type is not recognized in React.jsx

Is it possible to pass a different variable during the mouse down event when using Konva for 2D drawing?

send the checkbox control's model value back to the parent control in Vue3

Exploring the incorporation of interfaces into Vue.js/Typescript for variables. Tips?

What is the process of transforming two forms into components and then integrating those components into a view in Angular 5?

Make sure to implement validations prior to sending back the observable in Angular

What was the process for implementing the lexer and parser?

Ways to dynamically manipulate HTML elements in Angular 5

The 'string[]' type cannot be assigned to the 'string | ParsedUrlQueryInput | null | undefined' type in Next.js and Typescript