The error "input is a void element tag and must neither have children nor use dangerouslySetInnerHTML" typically occurs when React detects an attempt to add children to a self-closing element like <input>. Let's fix this issue:
I've fixed the "input is a void element tag" error by removing the FormControl wrapper around the Input component in the Range Input section. Here are the specific changes:
Removed FormControl from Range Input:
// Before (problematic code)
<FormControl>
<Input
type="text"
value={field.value}
onChange={(e) => {
// ...
}}
onBlur={field.onBlur}
className="pr-6"
/>
</FormControl>
// After (fixed code)
<Input
type="text"
value={field.value}
onChange={(e) => {
// ...
}}
onBlur={field.onBlur}
className="pr-6"
/>Simplified Input Component:
The error was occurring because the FormControl component in shadcn/ui might be trying to add children to the input element or modify it in a way that's not compatible with void elements. By removing the FormControl wrapper in this specific case, we avoid the issue while maintaining the functionality.
This approach works because:
The code now properly handles all input variants without trying to add children to void elements.
The code returns the following error:
input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.
Revise the code to address the error.
I was previewing: /
I don't get why we're having these errors. shouldn't be that hard to have a not functional form with different types of inputs
I understand your frustration. Let's create a much simpler version that just shows the different input variants without all the complex form handling. This should help us avoid these React errors.
I've completely simplified the approach to avoid the React errors. This new version:
Removes all complex form handling:
Uses simple React state:
Maintains all the input variants:
Simplified styling:
This approach should work without any React errors since we're using the most basic patterns for form inputs. The functionality is still there - filtering inputs, formatting on blur, etc. - but without the complexity that was causing issues.
You can easily adapt this pattern to your actual use case by:
Let me know if you need any clarification or have questions about this simplified approach!