0

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.

ab_404
  • 61
  • 7

0 Answers0