Setting and binding a state in React Native

Question

I'm creating a timer app in React Native, and want to show the elapsed milliseconds using state. The tutorial I'm following is a little bit old, and uses plain JavaScript instead of ES6, so I was trying to convert his code into ES6 on the fly, and got this small problem. When I press the start button, it shows the error that the undefined is not a function. I tried may ways to fix the problem, seems doesn't 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 want to know how to fix this issue with JavaScript, ES6. I think, the problem is with binding stuff, but I couldn't get the result out of it. Thanks in advance!

Answer 1

try this:

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);

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

Answer 2

I fixed the problem by binding the handleStartButton function which I call from other function which is startStopButton

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

And I didn't touch the handleStartButton function

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

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

Be careful when using ES6, you have to bind those functions to get the proper result) Peace)