How to remove submitted text input on React Native?-CodePudding

My code is working fine, it's pushing all the data to firebase as it should. I'm having no problems at all.

I just want to implement to remove the submitted data in text input. Since it stays there and you have to remove it manually.

I've been trying to add another function to 'onPress' to clear the inputs, but I can't seem to make it work. Any advice or help will be more than welcome.

Please check my code here below.

import { useState } from 'react';
import { StyleSheet, Text, View, TextInput, TouchableOpacity } from 'react-native';
import { addDoc, collection, doc, setDoc } from "firebase/firestore"; 
import { db } from './components/config';

export default function App() {

  const [nombre, setNombre] = useState('');
  const [cantidad, setCantidad] = useState('');
  const [pretexto, setPretexto] = useState('');

  function create(){
    //Submit data
    addDoc(collection(db, "users"), {
      nombre: nombre,
      cantidad: cantidad,
      pretexto: pretexto
    }).then(() => {
      console.log('Data submitted');
    }).catch((error) => {
      console.log(error);
    })
  }

  return (
    <View style={styles.container}>
      <View style={styles.textBox}>
        <TextInput value ={nombre} onChangeText={(nombre) => {setNombre(nombre)}} placeholder='Nombre del caretubo' style={styles.inputOne}></TextInput>
        <TextInput value={cantidad} onChangeText={(cantidad) => {setCantidad(cantidad)}} placeholder='Cantidad que debe el HP' style={styles.inputTwo}></TextInput>
        <TextInput value={pretexto} onChangeText={(pretexto) => {setPretexto(pretexto)}} placeholder='Pretexto' style={styles.inputThree}></TextInput>
        <TouchableOpacity style={styles.botonaso} onPress={() => {create; setNombre(''); }}>
          <Text style={styles.botonasoTexto}>Subir</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  textBox: {
    width: '100%',
    padding: 12,
    borderColor: 'gray',
    borderWidth: 1,
    borderRadius: 20,
  },
  inputOne: {
    fontSize: 15, 
  },
  inputTwo: {
    fontSize: 15,
  },
  inputThree: {
    fontSize: 15
  },
  botonaso: {
    backgroundColor: '#202A44',
    alignItems: 'center',
    borderRadius: 20,
    padding: 10
  },
  botonasoTexto: {
    color: 'white'
  }
});

CodePudding user response：

  const clearTextInputs = () => {
    setNombre('');
    setCantidad('');
    setPretexto('');
  };

  function create() {
    //Submit data
    addDoc(collection(db, "users"), {
      nombre: nombre,
      cantidad: cantidad,
      pretexto: pretexto
    }).then(() => {
      console.log('Data submitted');
      clearTextInputs(); // <---------- add here
    }).catch((error) => {
      console.log(error);
    })

  }

<TouchableOpacity style={styles.botonaso} onPress={create}> // <----- onPress here
  <Text style={styles.botonasoTexto}>Subir</Text>
</TouchableOpacity>