React Native useState onChangeText

Question

Hi I'm wondering why this code works, Sorry for the sintax errors, this is an Example. My question is why memberIpAssignments is taking ip value?. I don't get it if I'm no passing ip into setMemberIpAssignments(arr =>[...arr]) but still takes that's value and updating the state.

setMemberIpAssignments(arr =>[...arr]) , this state shouldn't change at all, because I'm no giving ip value. But it does change taking ip value. if someone can explain to me I'll be grateful. I'm new at react-native

export const zeroTierNetworkMembersUpdateScreen = ({ route }) => {
  const { ipAssignments } = ["192.168.0.1","192.168.1.1"];
  const [memberIpAssignments, setMemberIpAssignments] =(ipAssignments);

  return (
    <View style={styles.viewSet}>
     {memberIpAssignments.map((eachIpAssignments, index) => {
        return (
          <Input
            key={index}
            placeholder={"ipAssignments"}
            keyboardType={"default"}
            value={eachIpAssignments}
            onChangeText={(value) => {
              var ip = ipAssignments;
              ip[index] = value;
              setMemberIpAssignments(arr =>[...arr]);
            }}
          />
        );
      })}
    </View>
  );
};

Answer 1

I think I've confirmed my suspicions that you are in fact mutating an object reference that you've stored in local component state.

export const zeroTierNetworkMembersUpdateScreen = ({ route }) => {
  // (1) ipAssignments array reference
  const ipAssignments = ["192.168.0.1", "192.168.1.1"];

  // (2) memberIpAssignments references ipAssignments
  const [memberIpAssignments, setMemberIpAssignments] = useState(ipAssignments);

  return (
    <View style={styles.viewSet}>
     {memberIpAssignments.map((eachIpAssignments, index) => {
        return (
          <Input
            key={index}
            placeholder={"ipAssignments"}
            keyboardType={"default"}
            value={eachIpAssignments} // (3) value from memberIpAssignments
            onChangeText={(value) => {
              // (4) ip references ipAssignments & memberIpAssignments
              var ip = ipAssignments;
              // (5) element mutation!!
              ip[index] = value;
              // (6) state update to trigger rerender
              setMemberIpAssignments(arr => [...arr]);
            }}
          />
        );
      })}
    </View>
  );
};

As far as I can tell the mutation happens exactly once since initially everything is reference the original ipAssignments array. Upon updating state though, arr => [...arr] is returning a new array reference for memberIpAssignments the references back to ipAssignments is broken.

You should really be using a functional state update to "edit" the ip entry any way. Consider the following:

export default function App() {
  const ipAssignments = ['192.168.0.1', '192.168.1.1'];
  const [memberIpAssignments, setMemberIpAssignments] = React.useState(
    ipAssignments
  );

  return (
    <View>
      {memberIpAssignments.map((eachIpAssignments, index) => {
        return (
          <TextInput
            key={index}
            placeholder={'ipAssignments'}
            keyboardType={'default'}
            value={eachIpAssignments}
            onChangeText={(value) => {
              setMemberIpAssignments((arr) =>
                arr.map((el, i) => (i === index ? value : el))
              );
            }}
          />
        );
      })}
    </View>
  );
}

Expo Snack