"Attempted to assign readonly property" error during state update in react native and typescript

Question

What is causing this error. I am trying to update the username field in the parent state with a reusable function. and getting the following error. It seems as though I am able to update the username value once. But following that, it replaces the state entirely then falls over and throws an error.

const ProfileEdit: React.FC<Props> = ({ setIsModalOpen }) => {
  const user = useSelector(state => state.userData.user);

  // Create user details
  const [userDetails, setUserDetails] = useState({
    username: user.username,
    firstName: user.userName,
    lastName: user.lastName,
    gender: user.gender,
    dateOfBirth: user.dateOfBirth,
    city: user.city
  });

  // Change specific detail when input changes. This comes from the state value in the child component
  const changeVal = (formData, entry, val) => {
    setUserDetails((formData[entry] = val));
    console.log(userDetails);
  };

return (
    <Modal animationType="slide">
      <Container>
        <EditProfileInput
          inputTitle="Username"
          changeVal={changeVal}
          formData={userDetails}
          entry="username"
        />
  );
};

// Child Component
const EditProfileInput: React.FC<Props> = ({
  inputTitle,
  changeVal,
  formData,
  entry
}) => {
  return (
    <Container>
      <InputHeader>{inputTitle}</InputHeader>
      <Input>
        <InputText
          name={inputTitle}
          onChangeText={text => changeVal(formData, entry, text)}
        />
      </Input>
    </Container>
  );
};

score 0 · Answer 1 · answered Jan 20 '23 at 11:20

It seems that your function changeVal breaks the rule of immutability of Redux (see : https://redux.js.org/style-guide/ and https://daveceddia.com/react-redux-immutability-guide/).

I think your issue is related to : Cannot assign to read only property, React native error : Attempted to assign to readonly property

"Attempted to assign readonly property" error during state update in react native and typescript

1 Answers1