how to write if else inside render return react native

Question

I want to write if-else inside render return. I want to write if ImageSource === null then I want to get the code below.

    ImagePicker.showImagePicker(options, (response) => {
  console.log('Response = ', response);

  if (response.didCancel) {
    console.log('User cancelled photo picker');
  }
  else if (response.error) {
    console.log('ImagePicker Error: ', response.error);
  }
  else if (response.customButton) {
    console.log('User tapped custom button: ', response.customButton);
  }
  else {
    let source = { uri: response.uri };
    this.setState({
      ImageSource: source,
      data: response.data

    });
  }
});

here is inside render return

<TouchableOpacity onPress={this.selectPhotoTapped.bind(this)}>
      <View style={styles.ImageContainer}>
        {this.state.ImageSource === null ? <Text>Select a Photo</Text> :
          <Image style={styles.ImageContainer} source={this.state.ImageSource} />
        }
      </View>
    </TouchableOpacity>

else I want to get the uploaded image.

@Prasheel This code no problem, I want to implement if else inside the code. ImageSource === null the the code above else else I want to get the uploaded image — qing
– qing, Commented Mar 7, 2019 at 4:16
@Nirmalsinh, thanks for your reply. the code can work but I want to implement if-else inside the code. — qing
– qing, Commented Mar 7, 2019 at 4:23

Nirmalsinh Rathod · Accepted Answer · 2019-03-07 04:32:01Z

3

Update your condition ImageSource condition with undefined.

<TouchableOpacity onPress={this.selectPhotoTapped.bind(this)}>
      <View style={styles.ImageContainer}>
        {this.state.ImageSource === undefined || this.state.ImageSouce === null ? <Text>Select a Photo</Text> :
          <Image style={styles.ImageContainer} source={this.state.ImageSource} />
        }
      </View>
    </TouchableOpacity>

answered Mar 7, 2019 at 4:32

Nirmalsinh Rathod

5,2414 gold badges28 silver badges58 bronze badges

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

4 Comments

qing Over a year ago

still have the bug on image missing

Nirmalsinh Rathod Over a year ago

Can we talk vai skype or other middle? So I can help you to resolved the issue

Nirmalsinh Rathod Over a year ago

That will help for both

Nirmalsinh Rathod Over a year ago

Sent you a request. Kindly reply on it.

acarlstein · Accepted Answer · 2019-03-07 02:12:36Z

0

Try adding parenthesis and let me know if it did work.

<TouchableOpacity onPress={this.selectPhotoTapped.bind(this)}>
    <View style={styles.ImageContainer}>
        {this.state.ImageSource === null ? (
            <Text>Select a Photo</Text> 
        ):(
          <Image style={styles.ImageContainer} source={this.state.ImageSource} />
        )}
     </View>
</TouchableOpacity>

answered Mar 7, 2019 at 2:12

acarlstein

1,8352 gold badges15 silver badges21 bronze badges

3 Comments

qing Over a year ago

Thanks for your reply. This code can work. I have the bug on image missing when backward still there. I try to put if else inside the code but cannot work.

acarlstein Over a year ago

@qing Do you think I should leave this answer or should I remove it?

qing Over a year ago

this code no error can work but cannot solve my bug. No problem if you want to remove it. If you want to leave this answer no problem also. Anyway thanks for your reply and help me. Thank you very much :)

Afaq Ahmed Khan · Accepted Answer · 2019-03-07 04:31:05Z

0

This usually happens when you do inline conditional rendering like

{var && <MyComponent />}

which will render MyComponent if var is true. But it tried to render value of var. The fix is change conditions to make sure it's Boolean expression like

{var !== 0 && <MyComponent/ >}.

so you can change your code like this

<TouchableOpacity onPress={this.selectPhotoTapped.bind(this)}>
  <View style={styles.ImageContainer}>
    {this.state.ImageSource === null && <Text>Select a Photo</Text> }
    { this.state.ImageSource &&  <Image style={styles.ImageContainer} source={this.state.ImageSource} />
    }
  </View>
</TouchableOpacity>

this should work! for more details refer to this thread

answered Mar 7, 2019 at 4:31

Afaq Ahmed Khan

2,3222 gold badges31 silver badges41 bronze badges

Comments

Vu Luu · Accepted Answer · 2019-03-07 04:35:17Z

0

I suggest that you should split your render functions into several small function like:

renderTitle = () => <Text>Select a Photo</Text> 

renderImage = () => <Image style={styles.ImageContainer} source={this.state.ImageSource} />

 render(){
  return <TouchableOpacity onPress={this.selectPhotoTapped.bind(this)}>
      <View style={styles.ImageContainer}>
        {this.state.ImageSource === null ? this.renderTitle() : this.renderImage()
        }
      </View>
    </TouchableOpacity>
}

answered Mar 7, 2019 at 4:35

Vu Luu

8005 silver badges16 bronze badges

Comments

Afaq Ahmed Khan · Accepted Answer · 2019-03-07 04:51:52Z

0

I can't find anything wrong in your code?

or you can try this way.

<TouchableOpacity onPress={this.selectPhotoTapped.bind(this)}>
  <View style={styles.ImageContainer}>

    {!this.state.ImageSource && <Text>Select a Photo</Text> }
    {this.state.ImageSource && <Image style={styles.ImageContainer} source={this.state.ImageSource} />
    }
  </View>
</TouchableOpacity>

edited Mar 7, 2019 at 4:51

Afaq Ahmed Khan

2,3222 gold badges31 silver badges41 bronze badges

answered Mar 7, 2019 at 2:33

cain

7392 gold badges12 silver badges18 bronze badges

1 Comment

qing Over a year ago

thanks for your reply. I have the bug on image missing when backward still there.

Collectives™ on Stack Overflow

how to write if else inside render return react native

5 Answers 5

4 Comments

3 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

3 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related