react-native: undefined is not an object (evaluating 'prop.slice') - react-native

Question

im new to coding, and React-Native, and running into this error which i can't find an answer to, after extensive googling (it might be due to my newbiness and not understanding answers given to other users, so please be patient and point me in the right direction, if thats the case)
the error is:
undefined is not an object (evaluating 'timeAsProp.slice')
so to explain what timeAsProp.slice is: basically i needed the time to be passed as a prop to the newOrder() method, in just two digits. if the time is 10:00:00, my newOrder method should just proccess: 10
the current time is stored in state.
currentTime: new Date().toLocaleTimeString()
the above current time state reads out on the emulator as:
12:00:00 //if the time was 12:00 ocklock
The function
newOrder(timeAsProp)
recieves the time, and depending on what the hour is, should return a different array of images to be rendered for each hour on the hour.
(i only put two time options hardcoded into the app as im still building it. afterwards there will be a seperate image order returned, for each hour. its hardcoded this way, with a seperate option for each hour, untill i can figure out how to have a loop automatically set the images in their proper order depending on the time)
so basically, i need a different way of doing this, or figuring out why im getting this error...
thnks in advance ;)
heres my code:
import React, { Component } from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';
import AwesomeButton from 'react-native-awesome-button';
import Style from './Style';
class App extends Component {
constructor(props) {
super(props);
this.state = {
currentTime: null,
};
}
componentDidMount() {
setInterval(() => {
this.setState({
currentTime: new Date().toLocaleTimeString()
});
}, 1000);
}
handleButtonPress() {
}
**// heres the timeAsProp.slice which is giving me the error:**
newOrder(timeAsProp) {
const hour = timeAsProp.slice(0, 2);
if (hour === '19') {
return [
<div>
<Image source={require('./img/hey2.png')} style={Style.image} />
<Image source={require('./img/vav.png')} style={Style.image} />
<Image source={require('./img/hey1.png')} style={Style.image} />
<Image source={require('./img/yud.png')} style={Style.image} />
</div>
];
}
if (hour === '20') {
return [
<div>
<Image source={require('./img/vav.png')} style={Style.image} />
<Image source={require('./img/hey2.png')} style={Style.image} />
<Image source={require('./img/hey1.png')} style={Style.image} />
<Image source={require('./img/yud.png')} style={Style.image} />
</div>
];
}
}
render() {
return (
<View style={Style.rootContainer}>
<View style={Style.headerContainer}>
<Text style={styles.blue}> {this.state.curentTime} </Text>
</View>
<View style={Style.displayContainer}>
**//this is whats calling newOrder and returning the images**
{this.newOrder(this.state.time)}
</View>
<View style={Style.buttonContainer} >
<AwesomeButton
states={{
default: {
text: 'DeeDee! Dont press da button!',
backgroundStyle: {
backgroundColor: 'blue',
minHeight: 45,
alignItems: 'center',
borderRadius: 30,
marginBottom: 15,
marginLeft: 15,
},
onPress: this.handleButtonPress
}
}}
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
blue: {
fontFamily: 'serif',
color: 'blue',
fontWeight: 'bold',
fontSize: 30,
}
});
export default App;
Thanks for taking a look and hopefully teaching me something new!
sb

Answer 1

{this.newOrder(this.state.time)} is what you're calling in the render method but the value you have in state is currentTime:
this.state = {
currentTime: null,
};
Make sure you're passing the right variable in to the method you're calling. Also, it's better to check in the method that the variable has the type and value you expect before using it. So inside of newOrder perhaps check if timeAsProp is type string (typeof timeAsProp === 'string') before calling slice on it.

Answer 2

First, you have to change
{this.newOrder(this.state.time)}
To
{this.newOrder(this.state.currentTime)}
Then, in your constructor, initialize currentTime
constructor(props) {
super(props);
this.state = {
currentTime: new Date().toLocaleTimeString(),
};
}
The reason is that, as stated in the docs, render() executes before componentDidMount(), so in the moment newOrder is being called, currentTime has not been initialized.