CODEWITHSUNDEEP
react-native
program_bumble_bee
program_bumble_bee

Reputation: 305

React Image name console numbers not name

I am requiring array of four images in my react-native app. 

let pending = require('../../assets/claimsImages/pending.png');
let approved = require("../../assets/claimsImages/approved.png");          
let in_process = require('../../assets/claimsImages/inprocess.png');          
let cancelled = require("../../assets/claimsImages/cancelled.png");

constructor(props) {
        super(props)

        const status_image = [
          pending, approved, in_process, cancelled
        ]

        this.state = {
            newdata: [],
            images: status_image,

        }
    }

When I console the array of images like: console.log(this.state.images), it prints me some random numbers array as [2,3,4,5] or [8,11,12,13] instead of their names.

I need to get the names of the images required so that I can further render the images conditionally using switch case on the basis of their individual name.

something I am trying to achieve:

{val.claim_approval_status.map((status, i) => {
                            console.log('image key',i);
                            console.log('status name:', status)

                            switch(status){
                                case 'Approved':
                                        <View>
                                        <Image style={styles.stretch}
                                                source={this.state.images['approved']}
                                        />
                                    </View>
                                case 'In Process':
                                case 'Rejected':
                                case 'Pending':
                            }

Please help to get through it.

Upvotes: 2

Views: 178

Answers (2)

hong developer
hong developer

Reputation: 13916

Your present value is simply an arrangement. You have to make this into a JSON format. And get rid of unnecessary code, and simplify code for readability.

constructor(props) {
        super(props)

        this.state = {
            newdata: [],
            images: [
          {name: pending, path : require('../../assets/claimsImages/pending.png')},
          {name: approved, path : require("../../assets/claimsImages/approved.png")},
          {name: in_process, path : require('../../assets/claimsImages/in_process.png')},
          {name: cancelled, path : require('../../assets/claimsImages/cancelled.png')}
        ],

        }
    }
...
{this.state.images.map((item, i) => {
                            switch(item.name){
                                case 'approved': 
                                        (<View>
                                        <Image style={styles.stretch}
                                                source= {item.path}
                                        />
                                    </View>)
                                    break;
                                case 'in_process': break;
                                case 'cancelled': break;
                                case 'pending': break;
                            }

Upvotes: 1

ravibagul91
ravibagul91

Reputation: 20755

Instead of array,

const status_image = [pending, approved, in_process, cancelled]

You should create an object,

const status_image = {
      'Approved': approved,
      'In Process':in_process,
      'Rejected': cancelled,
      'Pending' : pending
}

Make sure that your status_image object's key should get match with claim_approval_status array's status

You can access the image using the status below,

{val.claim_approval_status.map((status, i) =>{
    console.log('image key', i);
    console.log('status name:', status)

    switch (status){
        case 'Approved':
            <View>
                <Image style = {styles.stretch}
                    source = {this.state.images[status]}  //can access image using status
                /> 
            </View>
        case 'In Process':
        case 'Rejected':
        case 'Pending':
    }
    })
}

Upvotes: 1

Related Questions