Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6212

Reset Input Values Upon Exiting

$
0
0

I am using native base input fields in my app like this:

const [startingPoint, setStartingPoint] = useState('');const [endingPoint, setEndingPoint] = useState('');<Input  placeholder="My Input Value"  onChangeText={text => setEndingPoint(text)}  value={endingPoint}/>

These values are wrapped inside View and Modals. Not any Form.

The inputting feature itself works correctly. However, when I exit the page (as in click back or cancel in my app) and come back, the values I wrote previously in the fields are still there. Is there any way I can reset them every time I exit the page?

This is how my modal looks like:

export const JourneyDetailsPage: React.FunctionComponent<JourneyDetailsPageProps> = ({  toggleShowPage,  showJourneyDetailsPage,}) => {  const [startingPoint, setStartingPoint] = useState('');  const [endingPoint, setEndingPoint] = useState('');  const [showAvailableTripsPage, setShowAvailableTripsPage] = useState(false);  const toggleAvailableTripsPage = () => {    setShowAvailableTripsPage(showAvailableTripsPage ? false : true);  };  return (<Modal      visible={showJourneyDetailsPage}      animationType="slide"      transparent={true}><SafeAreaView><View style={scaledJourneyDetailsStyles.container}><View style={scaledJourneyDetailsStyles.searchTopContainer}><View style={scaledJourneyDetailsStyles.searchTopTextContainer}><Text                onPress={toggleShowPage}>                Cancel</Text><Text>                Location</Text><Text>                Done</Text></View><View><Item rounded style={scaledJourneyDetailsStyles.searchField}><Icon                  name="map-marker"                  color="green"                /><Input                  placeholder="Start"                  onChangeText={text => setStartingPoint(text)}                  value={startingPoint}                /></Item><Item style={scaledJourneyDetailsStyles.searchField}><Icon                  name="search"                  color="blue"                /><Input                  placeholder="End"                  onChangeText={text => setEndingPoint(text)}                  value={endingPoint}                /></Item></View><View style={scaledJourneyDetailsStyles.offerContainer}><Text style={scaledJourneyDetailsStyles.offerText}              onPress={() =>                setShowAvailableTripsPage(true)              }              >Go</Text><Text style={scaledJourneyDetailsStyles.offerText}>1 Person</Text></View></View><AvailableTripsPage          showAvailableTripsPage={showAvailableTripsPage}          toggleShowPage={toggleAvailableTripsPage}        /></View></SafeAreaView></Modal>  );};

Viewing all articles
Browse latest Browse all 6212

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>