For Component

Hello ya'll, i have a <For> component with the following error:

This JSX tag's 'children' prop expects a single child of type '(item: Iinputs, index: Accessor<number>) => Element', but multiple children were provided.

This JSX tag's 'children' prop expects a single child of type '(item: Iinputs, index: Accessor<number>) => Element', but multiple children were provided.

With the following code:

interface FormProps {
    ...
    inputs: Iinputs[]
    ...
}

const FormComponent: Component<FormProps> = (props) => {
    return (
       <div class="flex-it">
           <For each={props.inputs}> {(input) => input.input()}</For>
        </div>
    )
}

interface FormProps {
    ...
    inputs: Iinputs[]
    ...
}

const FormComponent: Component<FormProps> = (props) => {
    return (
       <div class="flex-it">
           <For each={props.inputs}> {(input) => input.input()}</For>
        </div>
    )
}

My interfaces look like this:

export interface Iinternal {
    errorMsg?: string
    error?: boolean
}

export interface Iinputs {
    input: (props?: Iinternal) => JSXElement
}

export interface Iinternal {
    errorMsg?: string
    error?: boolean
}

export interface Iinputs {
    input: (props?: Iinternal) => JSXElement
}

I plan on passing in an array that looks like this:

export const inputs: Iinputs[] = [
    {
        input: (props?: Iinternal) => (
            <Inputs label="Email" type="password" name="password" id="password" {...props} />
        ),
    },
]

export const inputs: Iinputs[] = [
    {
        input: (props?: Iinternal) => (
            <Inputs label="Email" type="password" name="password" id="password" {...props} />
        ),
    },
]

Any help would be appreciated - new to SolidJS.

7 Replies

DaOfficialWizard🧙•2y ago

Not exactly sure if this is the correct way to do this - but i got rid of the error by doing this:

<div class="flex-it">
   <For each={props.inputs}>
     {(input, index) => (
         <div data-index={index()}>{input.input()}</div>
     )}
    </For>
</div>

<div class="flex-it">
   <For each={props.inputs}>
     {(input, index) => (
         <div data-index={index()}>{input.input()}</div>
     )}
    </For>
</div>

lxsmnsyc•2y ago

Most likely you have a whitespace after For?

DaOfficialWizard🧙•2y ago

i dont think so, maybe, it presents the error if i try to call the JSXElement directly instead of wrapping it in a div

lxsmnsyc•2y ago

Actually if you notice

<For each={props.inputs}> {(input) => input.input()}</For>

<For each={props.inputs}> {(input) => input.input()}</For>

There's a blank space before the function

<For each={props.inputs}> {(input) => input.input()}</For>
// vs
<For each={props.inputs}>{(input) => input.input()}</For>

<For each={props.inputs}> {(input) => input.input()}</For>
// vs
<For each={props.inputs}>{(input) => input.input()}</For>

DaOfficialWizard🧙•2y ago

🤦🏻 let me try that

lxsmnsyc•2y ago

space counts as a text, which then counts as a child This doesn't apply to tabs and newline

DaOfficialWizard🧙•2y ago

yeah, you're right that works cant believe all it was, was a whitespace character xD thank you

Gaming

Programming

For Component