How do I update a screen variable in React-Native?

Question

How do I update a screen variable in React-Native?

Navigation

#1 by (4 votes)

1

I have my following 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 display the word Teste on the screen 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 to print on the console.

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

javascript react-native

asked by anonymous 04.10.2018 / 19:32

1 answer

Javascript converts string to int when passed as function parameter How do I update a page at a set time?

score 4 · Accepted Answer

To change the state in React it is used the setState that will evolve the current state to a new state, so in place of this.state.teste = 'blabla' one must use this.setState({teste: 'blabla'}) . By that 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. Within funcao this no longer refers to classe current, but to who made the função call, then this.setState will report an error, since the button has no reference to% with%. In this case a setState in bind must be made to say that construtor within this will still refer to funcao . Here is 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. This link has a working example with React.