function 作为 JSX - React Native

Question

I want this function to be displayed in JSX code

function getValue() {
const QuestionChild = ['zara','whats up1','have u ever been in uk1']
const randomItem = QuestionChild[Math.floor(Math.random() * QuestionChild.length)];
console.log(randomItem)
return randomItem
}

Console log shows this result but can't be displayed in code

Here is JSX:

                <TouchableOpacity>
                <View style={styles.btnBack}><Text style={styles.smallwowo}>Back</Text></View> 
            </TouchableOpacity>

            <View style={styles.box}>
            <Text>{getValue}</Text>
            <TouchableOpacity onPress={()=> {getValue} }>
             <View style={styles.btn}><Text style={styles.wowo}>Next</Text></View>
             </TouchableOpacity>

When Next button will be clicked it should return randomly chosen string from Question array

Answer 1

EDIT to use hooks and to separate getValue() from state-related concerns:

Leave your getValue function the same as you originally had.

Somewhere at the top of your component:

const [randomValue, setRandomValue] = useState(getValue());

Then somewhere below that create a new onPress handler:

const onGetNewValue = () => setRandomValue(getValue());

Then in your onPress statement:

<TouchableOpacity onPress={onGetNewValue}>

And where you actually display the value would be

<Text>{randomValue}</Text>

Old answer:

First, to actually display the value, you need to actually call the function, so use

<Text>{getValue()}</Text>

Next, to have the button press change the value, you need to store the value in a state, which will trigger a re-render. There are different ways of doing this, but I would suggest in your constructor, create

this.state = { randomValue: getValue() }

Then in getValue do

...
const randomItem = QuestionChild[Math.floor(Math.random() * QuestionChild.length)];
this.setState({ randomValue: randomItem });

then instead, use

<Text>{this.state.randomValue}</Text>

Now, every time the button is clicked, a new value will be stored to state, and your component will be re-rendered with the new state value.

Answer 2

you should store some state -- whether via useState or via a stateful component -- and have the getValue function change that state.

Then you would do <TouchableOpacity onPress={getValue}> , not onPress={()=> {getValue} }