How to use new array() with .map?

Question

I want to use .map like this. I define array like new array(4) and I dont give anyitem. So when I use like this :

      imgUrls.map((url, index) => {
..
});

*this doesn't run 4 times. why ? I have default img so if imgUrls' first item is empty then use defaultimage. if second is empty then use defaultimage ... it should go like this but i couldnt solve *

My code which I try is below

 constructor(props) {
        super(props);

        this.state = {
          imgUrls: new Array(4),  
          defaultImage: require('../Images/addcircle.png'),   
        };
      }

renderContent = () => {
        const { imgUrls } = this.state;

            return imgUrls.map((url, index) => {

                try {
                    return (
                        <View key={index} >

                          <TouchableOpacity onPress={() => this.removeImg(index)}>
                            <View style={{ height: '100%', justifyContent: 'center', alignItems: 'center', aspectRatio: 1 }}>                  
                                            <Image
                                            source={{ uri: url } || this.state.defaultImage}
                                            style={{ height: '90%', width: '90%' }}
                                            /> 
                            </View>
                          </TouchableOpacity>

                        </View>
                        );
                } catch (error) {
                    console.log('error:', error);
                }
            }); 

      };


 render() {
        console.log('in bar');             
        return (

            <View style={styles.container}>
             {this.renderContent()} 
            </View>
)
}

Within the map you shouldnt need the trycatch. Also assign your new array to a variable and return the variable in render content. — Jacob Bralish
– Jacob Bralish, Commented Apr 4, 2019 at 11:20
little example ? I tried what u said but didnt work. imgUrls.map shouldn run 4 times ? — rnn
– rnn, Commented Apr 4, 2019 at 11:23

Hend El-Sahli · Accepted Answer · 2019-04-04 11:41:08Z

1

This one creates an empty arry that you can map over :)

const arr = Array.apply(null, Array(5));
arr.map(() => {}) // <- this one will work

This one creates an empty arry that you cann't map over

const arr = new Array(5);
arr.map(() => {}) // <- this one will not work

edited Apr 4, 2019 at 11:41

answered Apr 4, 2019 at 11:40

Hend El-Sahli

6,8585 gold badges31 silver badges50 bronze badges

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

Collectives™ on Stack Overflow

How to use new array() with .map?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related