I’m trying to pass className dynamically for components.
import { IonRow, IonItem, IonLabel, IonCol, IonInput, IonTextarea } from '@ionic/react';
import React from 'react';
import './InputField.css';
interface MyState {
elementType: any;
elementConfig: any;
value: any;
validation: any;
valid: boolean;
touched: boolean;
children: any;
changed: any,
}
const InputField: React.FC<MyState> = (props) => {
let inputElement: any;
let inputClasses = "InputElement";
switch ( props.elementType ) {
case ( 'email' ):
inputElement = (
<IonInput
className={inputClasses}
{...props.elementConfig}
value={props.value}
onIonChange={props.changed} />
);
break;
default:
inputElement = (<IonInput
className={inputClasses}
{...props.elementConfig}
value={props.value}
onIonChange={props.changed} />);
}
return (
<IonItem>
<IonLabel color="medium" position="floating">{props.children}</IonLabel>
{inputElement}
</IonItem>
);
};
export default InputField;
The class name appears right when I inspect it but the style is not applied. Also, the text is floating in this case, which disappears. But when I click to enter something it reappears (pic attached below).
