Why is the react text component not displaying updates to my array state

Question

I am trying to familiarize myself with React Native. At the moment I am working on an app but came across an issue when trying to display changes to the individual elements of an array. For example:

function MyApp() {
    const [array, setArray] = useState([1,2,3]);

    const onPress = () => {
        let temp = [3,2,1];
        setArray(temp);
    }
    
    return(
        <View>
            <TouchableHighlight onPress={onPress}> 
                 <View>
                     <Text>{array[0]}</Text>
                 </View>
            </TouchableHighlight>
        </View>
    );
}

With the above code, I expect '1' to be displayed in the text component and to change to '3' upon being pressed. console.log shows the state being changed but what is being displayed in the text component inside the actual app never updates. I then tried this using individual integer states like so:

const [int, setInt] = useState(0);

const onPress = () => {
    setInt(1);
}

Using an integer state such as the one above works totally fine as expected. Can anyone show me what I am doing wrong with my array state? Thank you.

Answer 1

Your code looks perfect and should work without any issue.

Here is the slightly modified example where the first element is generated randomly and is being shown properly in the Text component.

Working Example: Expo Snack

import React, { useState } from 'react';
import { Text, View, StyleSheet, TouchableHighlight } from 'react-native';
import Constants from 'expo-constants';

export default function MyApp() {
  const [array, setArray] = useState([1, 2, 3]);

  const onPress = () => {
    let temp = [Math.floor(Math.random() * 10), 2, 1];
    setArray(temp);
  };

  return (
    <View style={styles.container}>
      <TouchableHighlight onPress={onPress}>
        <View style={styles.btn}>
          <Text
            style={{ alignSelf: 'center', fontSize: 28, fontWeight: 'bold' }}>
            {array[0]}
          </Text>
        </View>
      </TouchableHighlight>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  btn: {
    width: 100,
    height: 100,
    borderColor: 'purple',
    borderWidth: 5,
    justifyContent: 'center',
  },
});

Answer 2

Your code looks to be fine, I tried the below following your code and can see that state and UI getting updated successfully when the button is being clicked.

Could you please check if your event handler function onPress is getting called, and if you are getting any error in the console when you click on it.

function App() {
  const [array, setArray] = React.useState([1, 2, 3]);

  const handleBtnClick = () => {
    const temp = [3, 2, 1];
    setArray(temp);
  };

  return (
    <React.Fragment>
      <button onClick={handleBtnClick}>Click</button>
      {array.map((el) => (
        <p>{el}</p>
      ))}
      <hr />
      {array[0]}
    </React.Fragment>
   );
}