Establishing and attaching a state in React Native

Question

Establishing and attaching a state in React Native

Currently, I am working on a timer application in React Native and aiming to display the elapsed milliseconds using state management. The guide I am referring to is slightly outdated as it uses plain JavaScript instead of ES6, so I took it upon myself to convert the code into ES6 syntax. However, I encountered a small issue where pressing the start button triggers an error mentioning that 'undefined' is not a function. Despite my attempts to rectify this by adjusting several elements, nothing seems to work.

...

class App extends Component {
   constructor(props) {
      super(props);
      // Initialize your state here
      this.state = {
         timeElapsed: null
      }
   }

   // getInitialState() {
   //    return {
   //       timeElapsed: null
   //    }
   // }

   render() {
      return (
         <View style={styles.container}>
            <View style={[styles.header, this.border('yellow')]}>
               <View style={[styles.timerWrapper, this.border('red')]}>
                  <Text>
                     {this.state.timeElapsed}
                  </Text>
               </View>

               ...
         </View>
      );
   }

   ...

   handleStartPress() {
      let startTime = new Date();

      // Update our state with some new value
      setInterval(() => {
         this.setState({
            timeElapsed: new Date() - startTime
         });
      }, 30);
   }

   ...

}

I am seeking advice on resolving this matter using JavaScript and ES6. My intuition suggests that the issue may be related to the binding process, but my efforts have not yielded any positive outcomes yet. Any assistance offered would be greatly appreciated! Thank you in advance.

javascript android react-native

Answer 1

Answer №1

Here is a suggestion for your code:

import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity
} from 'react-native';

export default class HelloReact extends Component {

  state:{
    timeElapsed : String;
  };

  constructor(props: Object) {
    super(props);
    this.state={timeElapsed : 'start'}
  };

  handleStartPress = () =>{
    let startTime = new Date();
    setInterval(() => {
        this.setState({
            timeElapsed: new Date() - startTime
        });
    }, 30);
  }

 render() {
  return (
      <TouchableOpacity onPress={this.handleStartPress} style={styles.container}>
         <View style={styles.container}>
                <Text>
                     {this.state.timeElapsed}
                </Text>
        </View>
     </TouchableOpacity>
  );
 }
}

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

AppRegistry.registerComponent('HelloReact', () => HelloReact);

If you use Arrow Functions like this: handleStartPress = () => { ... } , you won't need to bind your function using this: this.handleStartPress.bind(this).

Answer 2

Here is a suggestion for your code:

import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity
} from 'react-native';

export default class HelloReact extends Component {

  state:{
    timeElapsed : String;
  };

  constructor(props: Object) {
    super(props);
    this.state={timeElapsed : 'start'}
  };

  handleStartPress = () =>{
    let startTime = new Date();
    setInterval(() => {
        this.setState({
            timeElapsed: new Date() - startTime
        });
    }, 30);
  }

 render() {
  return (
      <TouchableOpacity onPress={this.handleStartPress} style={styles.container}>
         <View style={styles.container}>
                <Text>
                     {this.state.timeElapsed}
                </Text>
        </View>
     </TouchableOpacity>
  );
 }
}

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

AppRegistry.registerComponent('HelloReact', () => HelloReact);

If you use Arrow Functions like this: handleStartPress = () => { ... } , you won't need to bind your function using this: this.handleStartPress.bind(this).

Answer 3

Answer №2

My issue was resolved by binding the handleStartButton function, which is called from another function named startStopButton

startStopButton() {
   return (
      <TouchableOpacity onPress={this.handleStartPress.bind(this)}>
         <Text>Start</Text>
      </TouchableOpacity>
   )
}

I left the handleStartButton function unchanged

handleStartPress() {
   let startTime = new Date();

   // Update our state with some new value
   setInterval(() => {
      this.setState({
         timeElapsed: new Date() - startTime
      });
   }, 30);
}

It's important to remember when using ES6 that you need to bind those functions for the correct outcome) Peace)

Answer 4

My issue was resolved by binding the handleStartButton function, which is called from another function named startStopButton

startStopButton() {
   return (
      <TouchableOpacity onPress={this.handleStartPress.bind(this)}>
         <Text>Start</Text>
      </TouchableOpacity>
   )
}

I left the handleStartButton function unchanged

handleStartPress() {
   let startTime = new Date();

   // Update our state with some new value
   setInterval(() => {
      this.setState({
         timeElapsed: new Date() - startTime
      });
   }, 30);
}

It's important to remember when using ES6 that you need to bind those functions for the correct outcome) Peace)

Establishing and attaching a state in React Native

Answer №1

Answer №2

Similar questions

Creating a reusable field for reactive forms in Angular: A step-by-step guide

The failure to upload the APK was due to an error indicating that the keystore had been altered, even though no changes had actually been

create a sapper route using JSON data

Submit a data array using formData through axios

Instructions on sending search fields by pressing the enter key

What is the best way to position scale descriptions correctly?

Tips for modifying HTML attributes in AngularJS

Unable to transfer the variable name between different node modules for the purpose of using it as a chat room identifier in a socket.io application

Troubleshooting: Vue component does not refresh data when a function is

When the focus() method is used to programmatically set the cursor in a JQuery input element, the blinking cursor does

Retrieving selected values from a dynamic Primeng checkbox component

Reloading data in Angular using jQuery DataTables

Display a photo transitioning from black and white to color in a loading fashion, moving from left to right

Click on the marker to view information about the location stored in the HashMap

Illustrative demonstration of AngularJS

Multiple executions can be triggered by ng-checked function

Understanding when the @Input parameter has been modified

Set a dynamic Active Class on various divisions by utilizing their respective indexes

Extracting JSON Value from a Script Tag

Tips for animating AngularStrap Collapse