Array State not setting

Question

I am trying to set the state of an array, but it doesn't set it, I am mapping through the result of a fetch gotten from react-native-image-crop-picker , as i map I setState of the array but it doesn't set the state, it is always empty, after setting the state of the array I want to map through it and display it as an image, Please what may I be doing wrong, why isn't the array not getting set

import ImagePicker from 'react-native-image-crop-picker';

imageUpload(){
    ImagePicker.openPicker({
        multiple: true,
        cropping: true,
        mediaType: 'photo'
      }).then(images => {
        this.setState({
            images_array: images.map(i => {  
                console.log('received image', i);
                return {uri: i.path};
            })
        }, console.log(this.state.images_array));
    }).catch(e => console.log(e));
} 
constructor(props) {
    super(props);
    this.state = {
        upload: false,
        home: true,
        category: false,
        amount: false,
        no: 0,
        cat_id: '', 
        images_array: [],
        description: '',
        amount: '',

    };
}
images = this.state.images_array.map((image, index)=>{
        <Image resizeMode="contain" style={{width: 38,
    height: 38,
    borderRadius: 19}}
               source={{uri: image.uri}}/>});
<ScrollView showsVerticalScrollIndicator={false}>
                        <Text style={{
                            fontFamily: 'mont-medium', fontSize: 14, color: '#000', marginTop: 39, textAlign: 'center' }}>
                         Upload at least one picture{'\n'} of your product
                        </Text>
                        <TouchableNativeFeedback onPress={this.imageUpload.bind(this)}>
                        <View style={styles.multi}>
                            <View style={{height: 111, width: 123,alignSelf: 'center',}}>
                                <Image
                                    resizeMode="contain"
                                    style={{alignSelf: 'center', flex: 1}}
                                    source={require('../upload.png')}/></View>
                            <Text style={{fontFamily: 'mont', fontSize: 12,
                                color: '#b3b1b1',alignSelf: 'center',}}>
                                Attach photos...
                            </Text>
                        </View>
                        </TouchableNativeFeedback>
                        <View style={styles.does}>
                        {images}
                </View>
                        </ScrollView>

Hemadri Dasari · Accepted Answer · 2018-10-13 15:55:57Z

1

Try this

  .then(images => {
    const imagesArray = [];
    if(images){
    images.map(i => {  
           imagesArray.push({uri: i.path});
     })
     }
    this.setState({
        images_array: imagesArray
    });
 })

answered Oct 13, 2018 at 15:55

Hemadri Dasari

34.2k41 gold badges125 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Adokiye Iruene Over a year ago

@ThinkTwice,

images = this.state.images_array.map((image, index)=>{         <Image resizeMode="contain" style={{width: 38,     height: 38,     borderRadius: 19}}

source={{uri: image.uri}}/>});` , the images don't display even when the array is set

Hemadri Dasari Over a year ago

Is that inside render? You need to have that in render and so check it’s length and then do .map on it like if(this.state.images_array.length>0)this.state.images_array.map(

sMojtaba Mar · Accepted Answer · 2018-10-13 21:02:04Z

0

your .map does not return any value

instead of

images = this.state.images_array.map((image, index)=>{
        <Image resizeMode="contain" style={{width: 38,
    height: 38,
    borderRadius: 19}}
               source={{uri: image.uri}}/>});

Try this

images = this.state.images_array.map((image, index)=>{
        return(<Image resizeMode="contain" style={{width: 38,
    height: 38,
    borderRadius: 19}}
               source={{uri: image.uri}}/>)});

or this

images = this.state.images_array.map((image, index)=>(
        <Image resizeMode="contain" style={{width: 38,
    height: 38,
    borderRadius: 19}}
               source={{uri: image.uri}}/>));

edited Oct 13, 2018 at 21:02

answered Oct 13, 2018 at 20:14

sMojtaba Mar

3592 gold badges5 silver badges15 bronze badges

Collectives™ on Stack Overflow

Array State not setting

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related