ListInput-Component doesn't render in <ul> Tag (React)

Hey guys,

I’m starting to use Framework7 in combination with React and I created a custom “FormInput” Component which is just supposed to fill in some properties of the “ListInput”-Framework7-Component based on one state which is given as a property.

import React from "react";
import {ListInput} from "framework7-react";

export default function FormInput({label = "", type = "text", placeholder = "", state}) {
    return (
        <ListInput
            label={label}
            type={type}
            placeholder={placeholder}
            onInput={(e) => state.set(e.target.value)}
            errorMessage={state.msg}
            errorMessageForce={state.show}
        />
    );
}

The problem is, if I use this component inside the Framework7-List-Component, it doesn’t render the ListInput li Tag inside the of the ul tag of the list.

For example:

    <Page noToolbar noNavbar noSwipeback loginScreen>
        <LoginScreenTitle>Feiertool</LoginScreenTitle>
        <List form>
            <FormInput
                label="Nutzername"
                placeholder="Dein Nutzername"
                state={f_username}
            />
            <ListInput
                label="Passwort"
                type="password"
                placeholder="Dein Passwort"
                onInput={(e) => f_password.set(e.target.value)}
                errorMessage={f_password.msg}
                errorMessageForce={f_password.show}
            />
        </List>
        <List>
            <ListButton onClick={login}>Anmelden</ListButton>
        </List>
    </Page>

renders to

<form class="list">
    <li class>....</li>
    <ul>
        <li class>...</li>
    </ul>
</form>

instead of

<form class="list">
    <ul>
        <li class>....</li>
        <li class>...</li>
    </ul>
</form>

I can’t figure out why this is happening or rather if there is any workaround. Does someone have an idea?

You need to use slot for custom component List React Component | Framework7 React Documentation

<List form>
  <FormInput
    slot="list"
    ...
  />
            
</List>
2 Likes

Thank you so much, that works :slight_smile: