React hook state not updating

Question

I am creating a react component (child) which takes JSON/Object array as input (from Parent) as props.

Json looks something like this

const inputFields = [
  {
    key: 'name', 
    type: 'text', 
    label: `Your Full Name`,
    helper: 'Using your real name would make it more likely for you to get a match',
    templateOptions: { 
      placeHolder: 'Frank Murphy',
      templateStyle: styles.textStyle // refer to the style component
    }
  }, 
  {
    key: 'dob', 
    type: 'dateTyper', //change this to Dob component
    label: 'Your Date of birth',
    helper: 'Your Birthdate will help us in connecting you with people of similar age',
    required: true
  }]

And in my child component i am rendering it. In this object-array notice a key required in the second Object required: true

Now, In my child component I have touchableOpacity which I enable/disable based on this state. So here is a rough structure of my child component.

export const Component = (props) => {
  const { inputFields } = props
  const [index, setIndex] = useState(0)
  const currentComponent = inputFields[index]
  const {key, type, label, helper, buttonText, validator, required} = currentComponent
  console.log(required) // This is changing 
  const [mainButtonState, setButtonState] = useState(required)

And then a JSX of touchable component would look like this

 <TouchableOpacity 
   onPress={getValueFromState}
    disabled={mainButtonState}
    > 
    <Text> {usedButtonText} </Text> 
  </TouchableOpacity>

here onPress would just increment the state of index .

The problem I am facing is when, the state is incremented, my required which is undefined in the first object of inputFields is now true .

With this, I was hoping my button would be disable but my button is still active and my mainButton state is not set to true rather it is still undefined Can someone help me in figuring out how I should change the mainButtonState here?

Answer 1

const [index, setIndex] = useState(0)
const currentComponent = inputFields[index]
const {key, type, label, helper, buttonText, validator, required} = currentComponent
console.log(required) // This is changing 
const [mainButtonState, setButtonState] = useState(required)

You're getting mixed up between initialization and updating variables.

So here is what happens:

On first render you:

• initialize index to 0 .
• set currentComponent to inputFields[0]
• initialize mainButtonState to undefined (because currentComponent.required is undefined )

When you fire the onPress event, you increment index , which causes a second rerender.

On second rerender you:

• set currentComponent to inputFields[1]

And that's it.

Yes, currentComponent.required is now true , but this has nothing to do with the value of mainButtonState .

Initialization only happens on first render, so your mainButtonState value remains undefined .

To set mainButtonState , you need to call setButtonState . I would also change the setter function name to setMainButtonState to match the variable name, as it is bad practice to name the setter function differently than the variable. Setter functions should be the name of the variable they set, prefixed with "set".