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

Question

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>
 );
}

Solution 1

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

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

Solution 2

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>
 );

Comments

[Tekla]

Can you help me please? :)

[Tekla]

TypeError: undefined is not an object (evaluating 'this.props.item') :(

[Tekla]

TypeError: undefined is not an object (evaluating 'this.props.item')

[Akshay Rao]

If you are using item from props then it will work and if you are getting item from the map then you need to change it to <Image source={item}/>. Please check the updated answer above.

[Tekla]

Error message: Cannot add a child that doesn't have a YogaNode to a parent without a measure funtion!