How to display a random text from array on a button press in React Native?

Question

I have an array with some phrases that looks like this:

words = [
{ text: '...', key: 1},
{ text: '...', key: 2},
{ text: '...', key: 3},
{ text: '...', key: 4} ... ]

I want to display a random text from this array when I click a button. This is the code that I have so far:

import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';

export default function App() {

var textValue = 'Change me'

words = [...]

const len = words.length;
const changeTextValue = () => {
textValue = words[Math.floor(Math.random() * len)].text
}

return (
<View style={styles.container}>
  <Text>{textValue}</Text>
  <Button onPress={changeTextValue} title='Press me'/>
  <StatusBar style="auto" />
</View>
)
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'lightblue',
alignItems: 'center',
justifyContent: 'center',
},
});

But it doesn't work. Could you please help me with this? Thanks in advance.

Right now, what it returns on button click and what exactly you expect? — AT-2017
– AT-2017, Commented Jun 28, 2021 at 8:54
Right now the text doesn't change at all, but I expect there to be some text from my array — ALiCe P.
– ALiCe P., Commented Jun 28, 2021 at 8:58

Vlad L · Accepted Answer · 2021-06-28 08:54:30Z

1

Put it into state and display that state. Change state when button is clicked:

import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';

export default function App() {

  const [textValue, setTextValue] = useState('');

  words = [...]

  const changeTextValue = () => {
    const len = words.length;
    setTextValue(words[Math.floor(Math.random() * len)].text)
  }

  return (
    <View style={styles.container}>
      <Text>{textValue}</Text>
      <Button onPress={changeTextValue} title='Press me'/>
      <StatusBar style="auto" />
    </View>
  )
}

answered Jun 28, 2021 at 8:54

Vlad L

1,7013 gold badges10 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Terminat · Accepted Answer · 2021-06-28 09:02:14Z

In order to save your local state in React you need useState Hook. Hooks are just functions that you use in order to "hook into" internal React mechanims. Your example doesn't work because, this App Functional Component is rerendered, meaning that this function is called every time something changes, and text value that you have reset to "change me" on every render.

What is more, since the array of your words is constant, there is no need to put it inside functional component since, it will be redeclared on every render. It's better to move it outside of your component.

To make it work, you need to do it following way:

import {
  StatusBar
} from 'expo-status-bar';
import React, {
  useState
} from 'react';
import {
  StyleSheet,
  Text,
  View,
  Button
} from 'react-native';

const words = [{
    text: '...',
    key: 1
  },
  {
    text: '...',
    key: 2
  },
  {
    text: '...',
    key: 3
  },
  {
    text: '...',
    key: 4
  }...
]; // we move it outside so it's not redeclared

export default function App() {

  const [textValue, setTextValue] = useState('change me'); // we call use state hook with initial value

  const len = words.length;
  const changeTextValue = () => {
    setTextValue(words[Math.floor(Math.random() * len)].text) // we use setTextValue function that the hook returned for us
  }

  return ( <
    View style = {
      styles.container
    } >
    <
    Text > {
      textValue
    } < /Text> <
    Button onPress = {
      changeTextValue
    }
    title = 'Press me' / >
    <
    StatusBar style = "auto" / >
    <
    /View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'lightblue',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Collectives™ on Stack Overflow

How to display a random text from array on a button press in React Native?

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