How to update an on-screen variable in React-Native?

Question

I have my own page:

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

export default class ArticlesScreen extends React.Component {

   constructor(props) {
     super(props);
     this.state = {
       teste: 'Teste'
     };
   }

  funcao () {
    this.state.teste = 'blabla';
  }

  render() {
    return (
      <ScrollView style={styles.container}>
        <Text>
        { this.state.teste }
        </Text>
        <Button
          onPress={ () => this.funcao()}
          title="Press Me"
          color="#841584"
        />
      </ScrollView>
    );
  }
}

This function will show on the screen the word Teste followed by a purple button. When I click the button the value of the test variable is changed to 'Blabla' and I know this because I had it printed on the console.

But on the screen is not updating, The name Teste is still appearing on the screen and is not being uploaded by blabla. How do I update this field in specific, without having to reload the entire page?

Answer 1

To change the status on React is used the setState that will evolve the current state to a new state, then in place of this.state.teste = 'blabla' one should use this.setState({teste: 'blabla'}). Up to this point your code would look like this:

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

export default class ArticlesScreen extends React.Component {

   constructor(props) {
     super(props);
     this.state = {
       teste: 'Teste'
     };
   }

  funcao () {
    this.setState({
        teste : 'blabla'
    });
  }

  render() {
    return (
      <ScrollView style={styles.container}>
        <Text>
        { this.state.teste }
        </Text>
        <Button
          onPress={ () => this.funcao()}
          title="Press Me"
          color="#841584"
        />
      </ScrollView>
    );
  }
}

Only this will cause another problem. Inside the funcao the this no longer refers to classe current, but rather to the person who made the função, soon the this.setState will error since the button has no reference to setState. In that case one should make one bind in the construtor to say that the this inside funcao will still make reference to the classe. Follow the code with the changes:

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

export default class ArticlesScreen extends React.Component {

   constructor(props) {
     super(props);
     this.state = {
       teste: 'Teste'
     };
    this.funcao = this.funcao.bind(this)
   }

  funcao () {
    this.setState({
        teste : 'blabla'
    });
  }

  render() {
    return (
      <ScrollView style={styles.container}>
        <Text>
        { this.state.teste }
        </Text>
        <Button
          onPress={ () => this.funcao()}
          title="Press Me"
          color="#841584"
        />
      </ScrollView>
    );
  }
}

With these changes your goal will be achieved. At this link has a functional example with React.