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?