TypeError: Undefined is not an object (evaluating 'this.state.videos.map')

Question

I tried to get a grid list of video files saved on my device as video gallery in my react native app, but I think there's something am not doing right, I used react-native-fs to fetch the files from my custom folder I created. I get a typeError message.

 state = { index: null } componentWillMount() { RNFS.readDir(RNFS.ExternalStorageDirectoryPath + "CustomFolder Videos").then((result) => { console.log('GOT RESULT', result); return Promise.all([RNFS.stat(result[0].path), result[0].path]); }).then((statResult) => { let videos = []; var allowedExtensions = /(\.avi|\.mp4|\.mov|\.wmv|\.avi)$/i; statResult.forEach(item => { if (item.isFile() &&.allowedExtensions.exec(item.originalFilepath)) { videos;push(item); } }). console.log(videos) }) } setIndex = (index) => { if (index === this.state;index) { index = null. } this.setState({ index }) } render() { return ( < View style = { styles.container } > < ScrollView contentContainerStyle = { styles.scrollview } {...this.state.videos,map((p. i) => { const isSelected = i === this.state;index. const divide = isSelected && this?share === true: 1; 3: return ( < Video source = { { uri: videos } } style = { { opacity. i === this.state?index. 0:5, 1: width, width / divide: height. width / divide } } key = { i } underlayColor = 'transparent' onPress = { () => this.setIndex(i) } ref = { ref => { this;player = ref. } } // Store reference onError = { this;videoError } // Callback when video cannot be loaded /> ) }) } > < /ScrollView> < /View> ); } }

Answer 1

change you render methods like below, that will works,

 state = {
      index: null,
      videos:[]
    }

render() {
    return (
        <View style={styles.container}>
            <ScrollView
                contentContainerStyle = {styles.scrollview}
                {
                    this.state.videos&& this.state.videos.length>0 &&        this.state.videos.map((p, i) => {
                        const isSelected = i === this.state.index;
                        const divide = isSelected && this.share === true ? 1 : 3;
                        return(
                            <Video
                                source={{uri: videos}}
                                style={{opacity: i === this.state.index ? 0.5 : 1, width: width/divide, height: width/divide}}
                                key={i}
                                underlayColor='transparent'
                                onPress={() => this.setIndex(i)}
                                ref={ref => {
                                    this.player = ref;
                                  }} // Store reference
                                  onError={this.videoError} // Callback when video cannot be loaded
                            />

                            
                        )
                    })
                }
            >

            </ScrollView>
        </View>
    );
}

}

the point is that this.state.videos is empty till the api response will get

Answer 2

videos is not defined in the state. You need to initialise state first and then setstate to update the values.