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

React Native - useState - Text Input field is not clearing the first character from state after I delete all text from input

$
0
0

My problem is that when I enter on the airline textInput for example "TEST" and when I enter the delete keyboard button, the last character stays in the state ex: "T", but in view it shows like its fully deleted. With console.log(routes) I can see that the last character T is still in the object. Below is my code:

So I have this object

export const route: IRoute= {  id: 0,  airline: '',  startDate: '',  ticketNumber: '',};

I have this state

const [routes, setRoutes] = useState<IRoute[]>([route]);

To set the new value for airline I have this function

export const setFieldValue = (  value: string,  field: string,  id: number,  routes: IRoute[],  setRoutes: (updatedRoutes: IRoute[]) => void): void => {  const updatedRoutes = routes.map(rt => {    if (rt.id === id) {      rt[field] = value;    }    return rt;  });  setRoutes(updatedRoutes);};

This function is used on this component

<RouteFields  setAirline={airline => setFieldValue(airline, 'airline', value.id, routes, setRoutes)}  setTicketNumber={ticketNumber=> setFieldValue(ticketNumber, 'ticketNumber', value.id, routes, setRoutes)}  setStartDate={startDate=> setFieldValue(startDate, 'startDate', value.id, routes, setRoutes)}    fields={fields}/>

On Route Fields I have this components:

<Airline setAirline={setAirline} emptyField={emptyAirline} /><TicketNumber setTicketNumber={setTicketNumber} /><StartDate setDate={setStartDate} data={value} />

And finally on Airline I have this code:

interface AirlineProps{  setAirline: (airline: string) => void;  filterData?: string;}export const Airline = ({ setAirline }: AirlineProps): JSX.Element => {  const [state, setState] = useState('');  return (<TextInput      title={getAirline +' (optional)'}      value={state}      onChangeText={el => {        setAirline(state);        setState(el);      }}    />  );};

Viewing all articles
Browse latest Browse all 6287

Trending Articles



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