CODEWITHSUNDEEP
react-nativereact-props
mpc75
mpc75

Reputation: 989

set React Native state to the Button title prop

I can't figure out how to update the state in my basic React Native application to equal whatever is in the title prop of the Button.

I've tried just setting the state to be {title} and that hasn't worked. I am using the useState hook so I don't think I should need to use "this.". 

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

const StarterForm = () => {
    const [formStage, setFormStage] = useState(1)
    const [feelings, setFeelings] = useState('') 

  console.log(feelings)

  const updateFormStage = () => {
    setFormStage(formStage + 1)
    setFeelings({title})
  }

  switch (formStage) {
    case 1:
      return (
        <View>
          <Text>How are you?</Text>
          <Button title="Excellent" onPress={updateFormStage}/>
        </View>
      )
    case 2: 
        return (
          <Text>This is the case of two</Text>
        )
  }
};

In the example, I expect console.log(feelings) to equal "Excellent" once the button has been pressed.

Upvotes: 0

Views: 1120

Answers (2)

mmmatey
mmmatey

Reputation: 684

One way would be setting reference for your defined button and after click on it, retrieve data from reference like this:

<Button ref={ref => { this.button = ref; }} 
   title="Excellent" 
   onPress={this.updateFormStage} />

You can access your title via button reference using this.button.title:

updateFormStage = () => {
    console.log(this.button.title);
}

Upvotes: 1

Israel Nascimento
Israel Nascimento

Reputation: 680

You can use ref for that, but I think the best way to solve your problem is store "Excellent" in a variable, and use onPress={() => updateFormStage(mVariable)}

Upvotes: 1

Related Questions