Problem in clearing TextInput in React Native

Question

I have multiple TextInput React-native-paper inputs generated dynamically in table. whenever i put valuee and check that this value is greater or not from some specific value based on this it will show alert message and will clear the textinput but its doesnt clear it . the problem is that how to clear textInput after when the textchange in textinput?

    const  updateObtainMarks =(RN,obtmarks, subtotalmarks)=>{
    
    if(obtmarks>subtotalmarks)
    {
        if (Platform.OS === 'android') {
            ToastAndroid.show('Obtain marks should be less then total', ToastAndroid.SHORT, ToastAndroid.TOP);
            
          } else
           {
            AlertIOS.alert('Obtain marks should be less then total');
          }
    }
    else{
        var index = rollNo.indexOf(RN);
        // alert(index);
        obtainmarks[index]=obtmarks;  
    }
    

}

   return(

           {

                allrollNos.map((item, index) => (
      
                    <DataTable.Row>
                        <DataTable.Cell>{item.studentid}</DataTable.Cell>
                        <DataTable.Cell>{item.studentname}</DataTable.Cell>
                        <DataTable.Cell>{item.rollno}</DataTable.Cell>
                        {/* <DataTable.Cell>{item.obtainmarks}</DataTable.Cell> */}
                        <DataTable.Cell>
                            {item.obtainmarks===' '? 
                            ( 
                                <TextInput
                                // label='marks'          
                                    mode='flat'
                                    keyboardType='number-pad'
                                    maxLength={3}
                                    style={{height:25, padding:2, width:'100%'}}
                                    underlineColorAndroid="transparent"
                                    
                                    // defaultValue={''} 
                                    onChangeText={value=> addObtainMarks(item.rollno,value, item.subTotmarks)}
                                />
                            ):
                            (
                                <TextInput
                                // label='marks'

                                    mode='flat'
                                    keyboardType='number-pad'
                                    maxLength={3}
                                    style={{height:25, padding:2, width:'100%', border:'none'}}
                                    // value={item.obtainmarks}
                                    underlineColorAndroid="transparent"
                                    defaultValue={item.obtainmarks}

                                    //onChange={e =>updateObtainMarks(item.rollno, e.target.value, item.subtotalmarks)}
                                     onChangeText={value=> updateObtainMarks(item.rollno,value, item.subTotmarks)}
                                />
                            )      
                        }
                        </DataTable.Cell>
                        <DataTable.Cell>{item.obtainmarks}</DataTable.Cell>
                        <DataTable.Cell>{item.subTotmarks}</DataTable.Cell>
                    </DataTable.Row>
                            
                ))}

);

try doing a console.log if really `obtmarks>subtotalmarks` is true or not. — Sakshi, Dec 19 '20 at 11:22
i have check it , it true. once the alert show then the textinput disappear also i want to clear the text input that time when the obtmarks>subtotalmarks — Suliman Khan, Dec 19 '20 at 12:03

score 0 · Answer 1 · answered Dec 19 '20 at 13:40

This might help

const [data, setData] = React.useState(allrollNos);

const  updateObtainMarks =(RN,obtmarks, subtotalmarks, index)=>{
    
    if(obtmarks>subtotalmarks)
    {
        if (Platform.OS === 'android') {
            ToastAndroid.show('Obtain marks should be less then total', ToastAndroid.SHORT, ToastAndroid.TOP);
            
          } else
           {
            AlertIOS.alert('Obtain marks should be less then total');
          }
    // add logic here
        const newData = [...data];
        newData[index].clearField = true;
        setData(newData);
    } 

}


 allrollNos.map((item, index) => (
      
                   .....
                                <TextInput
                                // label='marks'

                                    .....
                                    defaultValue={ item.clearField ? "" : item.obtainmarks }
                                    onChangeText={value=> updateObtainMarks(item.rollno,value, item.subTotmarks, index)}
                                />
                            )      
                        }.....
                            
                ))

Problem in clearing TextInput in React Native

1 Answers1