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.

Answer 1

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>