CODEWITHSUNDEEP
react-native
Anton Efimov
Anton Efimov

Reputation: 75

react-native InputText onChange returns undefined or doesn't allow to change the value

I have the following code:

const { state, updateParentName, updateBabyName } = useContext(AuthContext);
const [isParentInputVisible, setParentInputVisible] = useState(false);

const toggleParentInput = () => {
  setParentInputVisible(!isParentInputVisible);
};

<View style={styles.headerContainer}>
  <Text style={styles.header}>Hello, </Text>
  {isParentInputVisible 
  ? (<TouchableOpacity onPress={toggleParentInput}>
      <Text style={styles.headerLink}>{state.parentName}</Text>
    </TouchableOpacity>) 
  : (<TextInput
      value={state.parentName}
      style={styles.parentInput}
      onChangeText={(value) => {updateParentName(value);}}
      onSubmitEditing={toggleParentInput}
    />)}
</View>;

And, as you can see, I use a Context to store my parentName value. I also set this var to parent as my default value.

Now, the problem that I am having and, that is driving me crazy, is I can't change the value in this Input field to anything. When I try to enter a new value there is returns undefined. When I remove onChangeText prop from that input for the sake of testing, it doesn't allow me to change the default value.

Can anyone point me to what should I do to fix it? I couldn't find anything useful that would help me.

UPDATE:

AuthContext file:

import createDataContext from './createDataContext';

const authReducer = (state, action) => {
  switch (action.type) {
    case 'update_parent_name':
      return { ...state, parentName: action.payload };
    default:
      return state;
  }
};

const updateParentName = (dispatch) => ({ parentName }) => {
  dispatch({ type: 'update_parent_name', payload: parentName });
};

export const { Provider, Context } = createDataContext(
  authReducer,
  {
    updateParentName,
  },
  {
    parentName: 'parent',
  }
);

and, just in case createDataContext code:

import React, { useReducer } from 'react';

export default (reducer, actions, defaultValue) => {
  const Context = React.createContext(defaultValue);
  const Provider = ({ children }) => {
    const [state, dispatch] = useReducer(reducer, defaultValue);

    boundActions = {};

    for (let key in actions) {
      boundActions[key] = actions[key](dispatch);
    }
    return (
      <Context.Provider value={{ state, ...boundActions }}>
        {children}
      </Context.Provider>
    );
  };

  return { Context, Provider };
};

Upvotes: 0

Views: 49

Answers (1)

Sagar Kulkarni
Sagar Kulkarni

Reputation: 503

The error is you've taken object as an argument in this function updateParentName but while calling the function through prop onChangeText you've passed the value as is without enclosing it in an object!

const updateParentName = (dispatch) => ({ parentName }) => {
  dispatch({ type: 'update_parent_name', payload: parentName });
};

onChangeText={(value) => {updateParentName(value);}} //passed only value not in an object!

Just change the onChangeText prop as such

onChangeText={(value) => {updateParentName({parentName:value});}}

Upvotes: 2

Related Questions