In my application numeric input and button component are here. When I input a number in numeric input and press the add button, I need to generate text input fields according to the inputted number.
const RequestSendingScreen = () => {
//set numeric input value
const [child, setCapacity]= useState('');
//function to dynamically create textinputs
const handleOnChange = () => {
const inputs=[];
for(let i=0; i<child; i++){
inputs.push(<View><TextInput style={styles.input}/></View>)
}
return inputs;
}
return(
<View style={styles.container}>
{/* Numeric input*/}
<NumericInput
onChange={value => setCapacity(value)}
minValue ={0}
maxValue = {60}
valueType = 'integer'
iconStyle={{ color: 'white' }}
rightButtonBackgroundColor='#35D2BF'
leftButtonBackgroundColor='#35D2BF'
totalWidth={200}
totalHeight = {50}
/>
{/* Button component calling the function handleonChange. */}
<AwesomeButton
backgroundShadow="#67F3E3"
borderRadius={50}
width={250}
progressLoadingTime ={400}
springRelease
textSize={18}
backgroundColor ="#35D2BF"
backgroundProgress ="#67F3E3"
onPress={handleOnChange}
raiseLevel={5}
>
Add
</AwesomeButton>
<View style={styles.container}>{inputs}</View>
);
}
Can someone let me know about how to create dynamic text inputs in React Native. No error is showing there. But the function is not working.