How to get state value from constructor in ES6? - reactjs

Question

I'm trying to move forward with ES6 syntax but I've got an error trying to retrieve state value.
So my question is : how to get the state value in ES6? Here is a part of the code:
constructor(props) {
super(props);
this.state = {
timeElapsed: null,
isRunning: false
}
}
Then when I try to get isRunning state, it gives me this error: Cannot read property 'isRunning' of undefined.
if (this.state.isRunning) {
clearInterval(this.interval);
this.setState({
isRunning: false
});
return
}
Any idea? Thanks.
EDIT (here is the full code):
import React, {Component} from 'react';
import {
Text,
View,
AppRegistry,
StyleSheet,
TouchableHighlight
} from 'react-native';
import Moment from 'moment';
import formatTime from 'minutes-seconds-milliseconds';
class StopWatch extends Component {
constructor(props) {
super(props);
this.state = {
timeElapsed: null,
isRunning: false
}
}
render() {
return (
<View style={styles.container}>
<View style={styles.header}>
<View style={styles.timerWrapper}>
<Text style={styles.timer}>{formatTime(this.state.timeElapsed)}</Text>
</View>
<View style={styles.buttonWrapper}>
{this.startStopButton()}
{this.lapButton()}
</View>
</View>
<View style={styles.footer}>
<Text>List of laps</Text>
</View>
</View>
)
}
startStopButton() {
var style = this.state.isRunning ? styles.startButton : styles.stopButton;
return (
<TouchableHighlight style={[styles.button, style]} onPress={this.handleStartPress} underlayColor="gray">
<Text>{this.state.isRunning ? 'Stop' : 'Start'}</Text>
</TouchableHighlight>
)
}
lapButton() {
return (
<TouchableHighlight style={[styles.button, styles.lapButton]} onPress={this.lapPress} underlayColor="gray">
<Text>Lap</Text>
</TouchableHighlight>
)
}
border(color) {
return {
borderColor: color,
borderWidth: 4
}
}
handleStartPress() {
console.log('Start was pressed');
if (this.state.isRunning) {
clearInterval(this.interval);
this.setState({
isRunning: false
});
return
}
var startTime = new Date();
this.interval = setInterval(
()=>{
this.setState({
timeElapsed: new Date() - startTime
})
}, 30
);
this.setState({
isRunning: true
})
}
lapPress() {
console.log('Lap was pressed');
}
}
var styles = StyleSheet.create({
container: { // Main container
flex: 1,
alignItems: 'stretch'
},
header: { // Yellow
flex: 2
},
footer: { // Blue
flex: 3
},
timerWrapper: {
flex: 5,
justifyContent: 'center',
alignItems: 'center'
},
timer: {
fontSize: 60
},
buttonWrapper: {
flex: 3,
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'center'
},
button: {
borderWidth: 2,
height: 100,
width: 100,
borderRadius: 50,
justifyContent: 'center',
alignItems: 'center'
},
startButton: {
borderColor: 'red'
},
stopButton: {
borderColor: 'green'
},
lapButton: {
borderColor: 'blue'
}
});
// AppRegistry.registerComponent('stopWatch', function() {
// return StopWatch;
// });
AppRegistry.registerComponent('stopwatch', () => StopWatch);
EDIT 2:
Here is a combined solution with and without binding in constructor:
import React, {Component} from 'react';
import {
Text,
View,
AppRegistry,
StyleSheet,
TouchableHighlight
} from 'react-native';
import Moment from 'moment';
import formatTime from 'minutes-seconds-milliseconds';
class StopWatch extends Component {
constructor(props) {
super(props);
this.state = {
timeElapsed: null,
isRunning: false
}
this.startStopButton = this.startStopButton.bind(this)
this.lapButton = this.lapButton.bind(this)
}
render() {
return (
<View style={styles.container}>
<View style={styles.header}>
<View style={styles.timerWrapper}>
<Text style={styles.timer}>{formatTime(this.state.timeElapsed)}</Text>
</View>
<View style={styles.buttonWrapper}>
{this.startStopButton()}
{this.lapButton()}
</View>
</View>
<View style={styles.footer}>
<Text>List of laps</Text>
</View>
</View>
)
}
startStopButton() {
var style = this.state.isRunning ? styles.startButton : styles.stopButton;
handleStartPress = () => {
console.log('Start was pressed');
if (this.state.isRunning) {
clearInterval(this.interval);
this.setState({
isRunning: false
});
return
}
var startTime = new Date();
this.interval = setInterval(
()=>{
this.setState({
timeElapsed: new Date() - startTime
})
}, 30
);
this.setState({
isRunning: true
})
}
return (
<TouchableHighlight style={[styles.button, style]} onPress={handleStartPress} underlayColor="gray">
<Text>{this.state.isRunning ? 'Stop' : 'Start'}</Text>
</TouchableHighlight>
)
}
lapButton() {
handleLapPress = () => {
console.log('Lap was pressed');
}
return (
<TouchableHighlight style={[styles.button, styles.lapButton]} onPress={handleLapPress} underlayColor="gray">
<Text>Lap</Text>
</TouchableHighlight>
)
}
border(color) {
return {
borderColor: color,
borderWidth: 4
}
}
}
var styles = StyleSheet.create({
container: { // Main container
flex: 1,
alignItems: 'stretch'
},
header: { // Yellow
flex: 2
},
footer: { // Blue
flex: 3
},
timerWrapper: {
flex: 5,
justifyContent: 'center',
alignItems: 'center'
},
timer: {
fontSize: 60
},
buttonWrapper: {
flex: 3,
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'center'
},
button: {
borderWidth: 2,
height: 100,
width: 100,
borderRadius: 50,
justifyContent: 'center',
alignItems: 'center'
},
startButton: {
borderColor: 'red'
},
stopButton: {
borderColor: 'green'
},
lapButton: {
borderColor: 'blue'
}
});
AppRegistry.registerComponent('stopwatch', () => StopWatch);

Answer 1

You need to bind your class methods to the correct this. See the facebook documentation on using ES6 classes: https://facebook.github.io/react/docs/reusable-components.html#es6-classes.
To fix your error, bind your methods inside of your classes constructor:
class StopWatch extends Component {
constructor(props) {
super(props);
this.state = {
timeElapsed: null,
isRunning: false
}
this.startStopButton= this.startStopButton.bind(this)
this.lapButton = this.lapButton.bind(this)
this.handleStartPress = this.handleStartPress.bind(this)
this.handleLap = this.handleLap.bind(this)
}
render() {
return (
<View style={styles.container}>
<View style={styles.header}>
<View style={styles.timerWrapper}>
<Text style={styles.timer}>{formatTime(this.state.timeElapsed)}</Text>
</View>
<View style={styles.buttonWrapper}>
{this.startStopButton()}
{this.lapButton()}
</View>
</View>
<View style={styles.footer}>
<Text>List of laps</Text>
</View>
</View>
)
}
startStopButton() {
var style = this.state.isRunning ? styles.startButton : styles.stopButton;
return (
<TouchableHighlight style={[styles.button, style]} onPress={this.handleStartPress} underlayColor="gray">
<Text>{this.state.isRunning ? 'Stop' : 'Start'}</Text>
</TouchableHighlight>
)
}
lapButton() {
return (
<TouchableHighlight style={[styles.button, styles.lapButton]} onPress={this.lapPress} underlayColor="gray">
<Text>Lap</Text>
</TouchableHighlight>
)
}
border(color) {
return {
borderColor: color,
borderWidth: 4
}
}
handleStartPress() {
console.log('Start was pressed');
if (this.state.isRunning) {
clearInterval(this.interval);
this.setState({
isRunning: false
});
return
}
var startTime = new Date();
this.interval = setInterval(
()=>{
this.setState({
timeElapsed: new Date() - startTime
})
}, 30
);
this.setState({
isRunning: true
})
}
lapPress() {
console.log('Lap was pressed');
}
}
sorry for the bad formatting

Answer 2

This has nothing to do with ES6, it's an inherent difficulty with the way Javascript works.
Your error is here:
onPress={this.lapPress}
You are thinking that means "when the button is pressed, invoke the method lapPress on my component". It doesn't. It means "when the button is pressed, invoke the method lapPress from my component, using whatever this happens to be set to".
There are several ways to bind this to its method properly, but the easiest (in ES6) might be
onPress={() => this.lapPress()}