React Native - Hook State update problem? Is it synchronization issue?

Question

This is the code here. Basically it is supposed to take the input and display it in the according section on the screen [Phone Number, Name, Address].

After each press of the button "Next" it is supposed to take the input, display it on the screen in the according section and then change the instruction [from "PLEASE ENTER YOUR PHONE NUMBER:" to "PLEASE ENTER YOUR NAME:" after the first pressing the button, for example].

It does display the input in the correct section, BUT it is not changing the instruction correctly. After the first press on the button "NEXT" the instruction stays the same ["PLEASE ENTER YOUR PHONE NUMBER:"]. But after the second press of the button it keeps changing but the input and instruction is not synchronous now.

I used the counter to update after each press, which works as an index for the array of the instructions. I tried tracking the counter and it is updating correctly, but not the instruction that is being displayed.

I'm just starting to learn ReactNative, so please be easy on me. Thanks:)

import React, { useState } from 'react';
import { StyleSheet, Text, View, Button, TextInput } from 'react-native';

export default function App() {

  var instructions = ['PLEASE ENTER YOUR PHONE NUMBER:', 'PLEASE ENTER YOUR NAME:', 'NOW ENTER YOUR ADDRESS:'];
  
  const [inText, setInText] = useState('');
  const [infoList, setInfoList] = useState ([]);
  const [counter, setCounter] = useState(0);
  const [instruction, setInstruction] = useState(instructions[0]);

  


  const inTextHandler = (textArg) => {
    setInText(textArg);
  }

  const pressNextHandler = () => {

    console.log(instructions[counter]);
    setInfoList(list => [...list, inText]);
    //setInText('');

    if (counter >= 2) {
      setCounter(0);
      setInstruction(instructions[counter]);
    } else
    {
      setCounter(counter + 1);
      console.log(counter);
      setInstruction(instructions[counter]);
    }
    
  }

  return (
    <View style={styles.screen}>
      <Text>
        {instruction}
      </Text>

      <TextInput 
        placeholder = "ex. (123) 456 7890"
        style = {styles.textInput}
        onChangeText = {inTextHandler}
        value = {inText}/>

      <View style={styles.button}>
        <Button
          title = 'NEXT'
          color = 'white'
          onPress = {pressNextHandler}/>
      </View>

      <View style={{marginTop: 10, padding: 10, backgroundColor: 'lightblue', height: 100, justifyContent: 'space-around'}}>
        <Text>Phone Number: {infoList[0]}</Text>
        <Text>Name: {infoList[1]}</Text>
        <Text>Address: {infoList[2]}</Text>
        <Text>{counter}</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: {
    paddingVertical: 50,
    paddingHorizontal: 50,
    backgroundColor: '#f1faee',
    height: '100%',
    justifyContent: 'center'
  },

  textInput: {
    paddingBottom: 5,
    marginTop: 10,
    borderBottomColor: 'black',
    borderBottomWidth: 1
  },

  button: {
    marginTop: 25,
    backgroundColor: '#86D984',
    alignItems: 'center',
    justifyContent: 'center'
  }
});```


  [1]: https://i.stack.imgur.com/NcZIf.jpg

React Native - Hook State update problem? Is it synchronization issue?

0 Answers0