How to "Hide a div by clicking alert box ok button" in reactjs

user_14499444 0
Viewed 960
  1. As I'm new to react I don't know much about hide/show.
  2. In my page, I have toggle button , When I click that button a container appears which contains 3 options.
  3. When I click any one of the options, an alert box appears.
  4. When I click ok button in the alert box, the whole container should hide.
  5. The working demo :codesandboxdemo
  6. The code:

 
.App {
  font-family: sans-serif;
  text-align: center;
}
.style1 {
  cursor: pointer;
  padding-top: 10px;
  border-bottom-left-radius: 1px
}
.style1:hover{
  background-color: #D3D3D3;
}
.box{
  background-color:#eeeeee;
  width:20%;
  margin-top:1px;

}
class Foo extends Component {

  state = { showing: false,  };
  handleClick()
  {
    
       alert("hi");
   
  }

  render() {
      const { showing } = this.state;
      return (
          <div>
              <button onClick={() => this.setState({ showing: !showing })}>toggle</button>
              { showing 
                  ? (
                  <div className="box">
                    <div className="style1" onClick={this.handleClick}>Action1</div>
                  <div className="style1" onClick={this.handleClick}>Action2</div>
                  <div className="style1" onClick={this.handleClick}>Action3</div>
                  </div>
                 )
                  : null
              }
          </div>  
      )
  }
}
export default Foo;

show-hide reactjs
3 Answers

I think, you must change the state of "showing" inside your "handleClick" method after alerting.

handleClick()
  {
    
       alert("hi");

       // in this place change your state
  }
user_18524440

Final output:

enter image description here

Here is how you can do that, I am using confirm dialogue box instead of alert as it has an option for OK and Cancel both, so it will be more user friendly:

import React, { Component } from "react";
import "./styles.css";

class Foo extends Component {
  state = { showing: false };
  handleClick = () => {
    if (window.confirm("Hide Div Emelent")) {
      this.setState({ showing: false });
    }
  };

  render() {
    const { showing } = this.state;
    return (
      <div>
        <button onClick={() => this.setState({ showing: !showing })}>
          toggle
        </button>
        {showing ? (
          <div className="box">
            <div className="style1" onClick={this.handleClick}>
              Action1
            </div>
            <div className="style1" onClick={this.handleClick}>
              Action2
            </div>
            <div className="style1" onClick={this.handleClick}>
              Action3
            </div>
          </div>
        ) : null}
      </div>
    );
  }
}
export default Foo;

Working Example: Codesandbox

user_56691200

A shortcut would be Yuri Piskunov's answer, i.e.

handleClick() {
alert("hi");
this.setState({ showing: false });

}

I would take a longer approach by using a library called react-alert This would also allow you to style your Alert box and give you more control Github: https://github.com/schiehll/react-alert demo: https://codesandbox.io/s/vibrant-hawking-7ywz9?file=/src/Foo.js:196-271

install react-alert and react-alert-template-mui

yarn add react-alert
yarn add react-alert-template-mui

in App.js

import React from "react";
import "./styles.css";
import Foo from "./Foo";
import { Provider } from "react-alert";
import AlertMUITemplate from "react-alert-template-mui";

export default function App() {
  return (
    <div className="App">
      <Provider template={AlertMUITemplate}>
        <Foo />
      </Provider>
    </div>
  );
}

and Foo.js

import React from "react";
import "./styles.css";
import { withAlert } from "react-alert";

class Foo extends React.Component {
  state = {
    showing: false,
    alert: this.props.alert
  };

  handleClick() {
    this.state.alert.show("Oh look, an alert!", {
      onClose: () => {
        this.setState({ showing: false });
      } // callback that will be executed after this alert is removed
    });
  }

  render() {
    const { showing } = this.state;
    return (
      <div>
        <button onClick={() => this.setState({ showing: !showing })}>
          toggle
        </button>
        {showing ? (
          <div className="box">
            <div
              className="style1"
              onClick={() => this.handleClick(this.props)}
            >
              Action1
            </div>
          </div>
        ) : null}
      </div>
    );
  }
}
export default withAlert()(Foo);
user_76473200
Related