CODEWITHSUNDEEP
imagereact-nativeconstructorsuperswiper.js
Tekla
Tekla

Reputation: 21

Can't find variable: props (react-native)

I am trying to create an image slider to my react-native project, but I don't really know why it keeps sending me this error: ReferenceError: Can't find variable: props, when I have the following constructor, and render;

constructor(props){ 
 super(props)
  this.state = {
   imagesSlider: [
    require('../images/1.jpg'),
    require('../images/2.jpg')
   ]
  }
}

render() {
 return (
  <Swiper style={styles.slide} autoplay> {
   this.state.imagesSlider.map(function(item,i){
    <View key={i}>
     <Image source={props.item}/>
    </View>
   })
  }
  </Swiper>
 );
}

Upvotes: 2

Views: 18531

Answers (2)

Akshay Rao
Akshay Rao

Reputation: 3544

you can not access the props directly instead the props will be available in the context of this. So use this.props to get the value from props instead of using props directly. You need to change the following code for your solution :-

render() {
 return (
  <Swiper style={styles.slide} autoplay> {
   this.state.imagesSlider.map(function(item,i){
    <View key={i}>
     <Image source={this.props.item}/>  ===> this needs to be changed to get the value of item from props.
    </View>
   })
  }
  </Swiper>
 );

UPDATE:-

According to the comment if you are using the item from the map of the state variable instead of getting item from props, then you need to change your code as below:-

render() {
 return (
  <Swiper style={styles.slide} autoplay> {
   this.state.imagesSlider.map(function(item,i){
    <View key={i}>
     <Image source={item}/>  ===> this needs to be changed to get the value of item from the map of state variable.
    </View>
   })
  }
  </Swiper>
 );

Upvotes: 1

MattYao
MattYao

Reputation: 2555

You should refer your props and state variables with 'this'. So in your it should be changed to:

<Image source={this.props.item}/>

Upvotes: 4

Related Questions