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); }} /> );};