React FormiumForm without defaultComponents throws error #67
Description
🐛 Bug report
Current Behavior
I'm using [email protected] with [email protected].
This is my pages/index.tsx:
const Home = ({ form }: { form: Form }) => {
// ...
return (
{/* ... */}
<FormiumForm
//components={defaultComponents}
data={form}
onSubmit={async (values) => {
await formium.submitForm("your_form_slug", values)
console.log("submit", values)
}}
/>
{/* ... */}
)
}
export default Home
export const getStaticProps: GetStaticProps = async () => {
const form = await formium.getFormBySlug("<form-slug>")
return { props: { form } }
}No matter if I provide defaultComponents as components prop or not, Next will throw this error:
Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.
When i console.log formium's defaultComponents, this get's logged:
{
SubmitButton: [Function: SubmitButton],
NextButton: [Function: NextButton],
PreviousButton: [Function: NextButton],
Header: [Function: Header],
ElementsWrapper: [Function: ElementsWrapper],
PageWrapper: [Function: PageWrapper],
FooterWrapper: [Function: FooterWrapper],
FieldWrapper: [Function: FieldWrapper],
FormControl: {
'$$typeof': Symbol(react.memo),
type: [Function: FormControl],
compare: null
},
TextInput: {
'$$typeof': Symbol(react.memo),
type: [Function: TextInput],
compare: null
},
Textarea: {
'$$typeof': Symbol(react.memo),
type: [Function: Textarea],
compare: null
},
Radio: {
'$$typeof': Symbol(react.memo),
type: [Function: Radio],
compare: null
},
Checkbox: {
'$$typeof': Symbol(react.memo),
type: [Function: Checkbox],
compare: null
}
}Looks right to me?
Same error when using the example from https://formium.io/docs/react/typescript.
Your environment
| Software | Version(s) |
|---|---|
| Formium | 0.1.3 |
| React | 17.0.2 |
| TypeScript | 4.3.5 |
| npm/Yarn | [email protected] |
| Operating System | MacOS |