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.

here is the working app: snack.expo.io/@xeteke8423/cranky-kiwi — Ketan Ramteke
– Ketan Ramteke, Commented Feb 5, 2021 at 5:05

Ketan Ramteke · Accepted Answer · 2021-02-05 05:09:45Z

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',
  },
});

Sagnik Chakraborty · Accepted Answer · 2021-02-05 07:12:37Z

0

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

answered Feb 5, 2021 at 7:12

Sagnik Chakraborty

291 silver badge4 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related