How to change text Value upon Button press in React Native?

Question

I'm an iOS developer currently working on an experimental React Native app.

I have the following code which shows a button and sample text on the screen.

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

export default class App extends React.Component {
  constructor() {
    super();
    this.state = {sampleText: 'Initial Text'};
  }

  changeTextValue = () => {
    this.setState({sampleText: 'Changed Text'});
  }

  _onPressButton() {
    <Text onPress = {this.changeTextValue}>
      {this.state.sampleText}
    </Text>
  }

  render() {
    return (
      <View style={styles.container}>
        <Text onPress = {this.changeTextValue}>
          {this.state.sampleText}
        </Text>

        <View style={styles.buttonContainer}>
          <Button
            onPress={this._onPressButton}
            title="Change Text!"
            color="#00ced1"
          />
        </View>
      </View>
    );
  }
}

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

The above code displays text and a button.

However when I click the button, the app crashes instead of showing the new text which is to be shown.

I'm new to React Native, kindly guide me on how to solve the error.

klendi · Accepted Answer · 2018-12-16T14:26:10.007

You could use a state to keep your default text and then on press we update the state.

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

export default class App extends Component {
  state = {
    textValue: 'Change me'
  }

  onPress = () => {
    this.setState({
      textValue: 'THE NEW TEXT GOES HERE'
    })
  }

  render() {
    return (
      <View style={{paddingTop: 25}}>
        <Text>{this.state.textValue}</Text>
        <Button title="Change Text" onPress={this.onPress} />
      </View>
    )
  }
}

score 1 · Answer 2 · answered May 03 '18 at 12:38

You can use state for dynamically change the text

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

export default class App extends Component{
constructor(){
    super();
    this.state = {
    textValue: 'Temporary text'
    }
    this.onPressButton= this.onPressButton.bind(this);
}

onPressButton() {
    this.setState({
        textValue: 'Text has been changed'
    })
}

render(){
    return(

<View style={{paddingTop: 20}}>
  <Text style={{color: 'red',fontSize:20}}> {this.state.textValue} </Text>
  <Button title= 'Change Text' onPress= {this.onPressButton}/>
</View>

   );
 }
}

score 1 · Answer 3 · answered Jun 30 '21 at 21:40

With hooks:

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

const App = () => {
  const [text, setText] = useState("Initial text");

  const onPressHandler = event => setText("Changed text");

  return (
    <View>
      <Text>{text}</Text>
      <Button title="Change Text" onPress={onPressHandler} />
    </View>
  );
};

Matt Aft · Answer 4 · 2017-12-27T18:07:49.760

0

It's because your onPress function is a little weird, you want to invoke an action on press, not have jsx elements. Your changeTextValue is what should be passed into your button's onPress.

edited Dec 27 '17 at 18:07

answered Jul 11 '17 at 18:08

Matt Aft

8,742
3
24
37

*your changeTextValue. not you're. – ahmetkilinc Dec 27 '17 at 11:59

score 0 · Answer 5 · edited Nov 19 '17 at 03:50

You can use this approach for updating a value on click of a button

class App extends React.Component {
   constructor() {
     super();
     this.state = { val: 0 }
     this.update = this.update.bind(this)
   }
   update() {
     this.setState({ val: this.state.val + 1 })
   }
   render() {
     console.log('render');
     return <button onClick={this.update}>{this.state.val}</button>
   }
}

score 0 · Answer 6 · answered Jul 11 '17 at 18:25

0

You better make sure what _onPressButton() is doing. You can simply setState() in this function and do nothing else, which can help you solve the problem. If you want to render something new, you have to add return() and wrap up Text.

answered Jul 11 '17 at 18:25

Jack Ou

97
4

score 0 · Answer 7 · edited Aug 30 '20 at 21:30

0

Set my text in state method then update state in pressed button, then set in text like this:

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

edited Aug 30 '20 at 21:30

mdmundo

1,988
2
23
37

answered Aug 30 '20 at 14:56

score 0 · Answer 8 · answered Jul 16 '21 at 09:04

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

const App = () => {
  const [value, setValue] = useState("Mohd Sher Khan");

  const hellod = () => {
    setValue("value changed");
    
  };

  return (
    <View>
      <Text onPress={hellod}>{value}</Text>
    </View>
  );
};

export default App;

How to change text Value upon Button press in React Native?

8 Answers8