CODEWITHSUNDEEP
javascriptreact-native
Jack23
Jack23

Reputation: 1396

Insert Alert inside a function

I have a function that I call when I click on a button. In this function I insert a component to show an alert (react-native-scl-alert)

The call enters in the function (the console log is printed) but the alert doesn't work, do you know why? There is something that I do wrong?

Thank you

constructor(props) {
    super(props);
this.state = {
//Alert
  show: false
};


alertFeedback() {
    this.setState({ show: true })
    console.log("Inside Alert Feedback")
    if (this.props.Roles == "ROLE") {

        <SCLAlert
          theme="info"
          show={this.state.show}
          title="Lorem"
          subtitle="Lorem ipsum dolor"
          onRequestClose={()=>{}}
        >
          <SCLAlertButton theme="info" onPress={this.stopConnection} >Done1</SCLAlertButton>
          <SCLAlertButton theme="success" onPress={this.stopConnection}>Done2</SCLAlertButton>
          <SCLAlertButton theme="danger" onPress={this.stopConnection}>Done3</SCLAlertButton>
        </SCLAlert>


    } else {
      this.stopConnection();
    }
  }

  stopConnection() {
    this.setState({ show: false })


render() {
    return (
<View style={activity.button}>
            <TouchableOpacity
              style={[style.button, style.buttonOK]}
              onPress={() => this.alertFeedback()}
            >
              <Text style={style.buttonTesto}>Stop</Text>
            </TouchableOpacity>
)}

Upvotes: 0

Views: 238

Answers (3)

abhikumar22
abhikumar22

Reputation: 1814

The below code you have to write inside render function of your component always, and for conditional alert the value i.e. this.state.show should be true when you want to show it.

render should look like this,

render() {
        return (
            <View style={activity.button}>
                <SCLAlert
                    theme="info"
                    show={this.state.show}
                    title="Lorem"
                    subtitle="Lorem ipsum dolor"
                    onRequestClose={() => { }}
                >
                    <SCLAlertButton theme="info" onPress={this.stopConnection} >Done1</SCLAlertButton>
                    <SCLAlertButton theme="success" onPress={this.stopConnection}>Done2</SCLAlertButton>
                    <SCLAlertButton theme="danger" onPress={this.stopConnection}>Done3</SCLAlertButton>
                </SCLAlert>
                <TouchableOpacity
                    style={[style.button, style.buttonOK]}
                    onPress={() => this.alertFeedback()}
                >
                    <Text style={style.buttonTesto}>Stop</Text>
                </TouchableOpacity>
            </View>
        )
    }

So, when 

if (this.props.Roles == "ROLE") {
    this.setState({show:true})
}

and don't forget to initialize show in your constructor inside your class,

constructor(props) {
        super(props)
        this.state = {
            show: false,
    };
}

I hope this helps ......Thanks :)

Upvotes: 2

KCFragrance
KCFragrance

Reputation: 158

As Per your code you are not rendering the alert you should add some key check and show alert on basis of that something Like: 

  constructor(props) {
    super(props);
    this.state = {
     //Alert
     show: false,
     showAlert:false
    };


  alertFeedback() {
    this.setState({ show: true })
    console.log("Inside Alert Feedback")
    if (this.props.Roles == "ROLE") {

    this.setState({ showAlert: true})


    } else {
      this.stopConnection();
    }
  }

  stopConnection() {
    this.setState({ show: false })


   render() {
    return (
    <View style={activity.button}>
    <div>
            <TouchableOpacity
              style={[style.button, style.buttonOK]}
              onPress={() => this.alertFeedback()}
            >
              <Text style={style.buttonTesto}>Stop</Text>
            </TouchableOpacity>

     {this.state.showAlert
      ?  <SCLAlert
          theme="info"
          show={this.state.show}
          title="Lorem"
          subtitle="Lorem ipsum dolor"
          onRequestClose={()=>{}}
        >
          <SCLAlertButton theme="info" onPress={this.stopConnection} 
         >Done1</SCLAlertButton>
          <SCLAlertButton theme="success" onPress= 
         {this.stopConnection}>Done2</SCLAlertButton>
          <SCLAlertButton theme="danger" onPress= 
           {this.stopConnection}>Done3</SCLAlertButton>
        </SCLAlert> 
     :""
</div>

)}

Hope this will work!!

Upvotes: 0

Pushprajsinh Chudasama
Pushprajsinh Chudasama

Reputation: 7949

You need to return the SCAlert dialogue box becuase you are not writing it in the render() method.

constructor(props) {
    super(props);
this.state = {
//Alert
  show: false
};


alertFeedback() {
    this.setState({ show: true })
    console.log("Inside Alert Feedback")
    if (this.props.Roles == "ROLE") {
      return (
        <SCLAlert
          theme="info"
          show={this.state.show}
          title="Lorem"
          subtitle="Lorem ipsum dolor"
          onRequestClose={()=>{}}
        >
          <SCLAlertButton theme="info" onPress={this.stopConnection} >Done1</SCLAlertButton>
          <SCLAlertButton theme="success" onPress={this.stopConnection}>Done2</SCLAlertButton>
          <SCLAlertButton theme="danger" onPress={this.stopConnection}>Done3</SCLAlertButton>
        </SCLAlert>
     )

    } else {
      this.stopConnection();
    }
  }

  stopConnection() {
    this.setState({ show: false })


render() {
    return (
<View style={activity.button}>
            <TouchableOpacity
              style={[style.button, style.buttonOK]}
              onPress={() => this.alertFeedback()}
            >
              <Text style={style.buttonTesto}>Stop</Text>
            </TouchableOpacity>
)}

Upvotes: 0

Related Questions