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.