I have a component
export default function AppTextInput({icon, placeholder,onChangeText, ...otherProps}) {
const onChanged =(text) =>{
let newText = '';
let numbers = '0123456789';
for (var i=0; i < text.length; i++) {
if (numbers.indexOf(text[i]) > -1) {
newText = newText + text[i];
} else {
alert("please enter integer numbers only");
}
}
}
return (
<View style={styles.container}>
{icon &&
<MaterialCommunityIcons style={{marginRight: 10}} name={icon} color={colors.grayMedium} size={20}/>}
<TextInput style={defaultStyles.text} placeholder={placeholder}
onChangeText={(text)=> onChanged(text)} maxLength={3} {...otherProps}
></TextInput>
</View>
)
}
and use of component
<View style={{top: -80}}>
<AppTextInput icon="timer-sand" placeholder={"Prep Time"} keyboardType='numeric' onChangeText={(text) => setPrepTime(text)}/>
<AppTextInput icon="timer" placeholder={"Round Duration"} keyboardType='number-pad' onChangeText={(text) => setRoundDuration(text)}/>
<AppTextInput icon="timer" placeholder={"Break Duration"} keyboardType='number-pad' onChangeText={(text) => setBreakDuration(text)}/>
<AppTextInput icon="repeat" placeholder={"Number of Rounds"} keyboardType='number-pad' onChangeText={(text) => setNumRounds(text)}/>
<AppTextInput icon="format-list-numbered" placeholder={"Number of Sets"} keyboardType='number-pad' onChangeText={(text) => setNumSets(text)}/>
{exerciseInputEles}
</View>
but when i input values ,alert vorks,but onChangeText={(text) => setNumSets(text)} and other don’t see my input, why
what should i change that alert work and all onChangeText={(text) => setNumSets(text)} next input see my input?
i don’t now what to try more to fix this or create current input
2
Answers
Do it this way:
and in appTextInput modify as below:
Make this changes
Use: add your state variable in the value tag I’ve added possible guess of name that you might have but it’s not you can change it to your respective state name