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

unable to reset Input field

$
0
0

On my screen, I have an input field that looks like this:

export const FavouritePointInput: React.FunctionComponent<FavouritePointInputProps> = ({  getMyLocationCoordinates,  textChangeHandler,  handleFocus,  favouritePoint,}) => {  return (<Item style={styles.searchField}><TouchableOpacity onPress={getMyLocationCoordinates}><Icon name="search" style={styles.searchIconStyles} /></TouchableOpacity><Input        onFocus={() => {          handleFocus('favouritePoint');        }}        onChangeText={(text) => textChangeHandler('favouritePoint', text)}        style={styles.searchText}        value={favouritePoint}      /></Item>  );};

When I click on the back button on my screen, I use these custom hooks:

const resetLocation = useResetLocation();onPress={() => {                navigation.goBack();                resetLocation('favouriteLocation');              }}>

to resetLocation

This is how the hook looks like:

export const useResetLocation = () => {  const setLocationForPoint = useSetLocationForPoint();  const resetLocation = (fieldName: string) => {    let setAddressAction;    if (fieldName === 'startingPoint') {      setAddressAction = getSetStartPointAction({        coordinates: [],        street: '',      });    }    else {      console.log('fieldname', fieldName);      setAddressAction = getSetFavouritePointAction({        coordinates: [],        street: '',      });    }    setLocationForPoint(setAddressAction);  };
export const getSetFavouritePointAction = (favouritePoint: {  coordinates: number[];  street: string;}) => {  console.log('getSetFavouritePointAction FAV POINT', favouritePoint)  return {    type: LOCATIONS.SET_FAVOURITE_POINT,    payload: favouritePoint,  };};

Whenever I go back, I see the console logs and this console.log('getSetFavouritePointAction FAV POINT', favouritePoint)returns an empty object. However, when I go back to the screen, the word is still written in the input field. The same method is working somewhere else but not here so might be a minor mistake.

Upon going back, I also see logs from here. The state becomes empty when I go back. However, the input field still doesn't become empty.

export default (state = INITIAL_STATE, action) => {  switch (action.type) {    case LOCATIONS.SET_END_POINT:      return { ...state, endPoint: action.payload };    case LOCATIONS.SET_STARTING_POINT:      return { ...state, startingPoint: action.payload };    case LOCATIONS.SET_FAVOURITE_POINT:      console.log('FAVOURITE_POINT');      console.log('state', action.payload )      return { ...state, favouritePoint: action.payload };    default:      return state;  }};

Viewing all articles
Browse latest Browse all 6213

Trending Articles



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