vantezzen / autoform

🌟 Automatically render forms for your existing data schema
https://autoform.vantezzen.io
2.94k stars 108 forks source link

Key prop spread #129

Open rogueturnip opened 3 weeks ago

rogueturnip commented 3 weeks ago

Great library! Functionally things are rendering great but I'm seeing errors and when I submit all my select (enum) options fail validation.

Cannot update a component (`HotReload`) while rendering a different component (`SelectField`). To locate the bad setState() call inside `SelectField`, follow the stack trace as described in https://react.dev/link/setstate-in-render

SelectField.tsx:14 A props object containing a "key" prop is being spread into JSX:
  let props = {key: someKey, required: ..., error: ..., name: ..., onChange: ..., onBlur: ..., ref: ..., children: ...};
  <Select {...props} />
React keys must be passed directly to JSX without using spread:
  let props = {required: ..., error: ..., name: ..., onChange: ..., onBlur: ..., ref: ..., children: ...};
  <Select key={someKey} {...props} />

my code is very simple.

<AutoForm schema={new ZodProvider(detailSchemas[inspectionType])} onSubmit={onSubmit}>

Is this something I'm not setting up right or other?

Thanks!

rogueturnip commented 3 weeks ago

I should mention.. my schema looks like this

  roof_gutters: z.object({
    materialType: z.enum(['Aluminum', 'Copper', 'Steel', 'Vinyl']),
    properlyAttached: z.boolean(),
    debrisFree: z.boolean(),
    properDrainage: z.boolean(),
    ...inspectionItemSchema
  }),