How to create a popup menu on onclick?

Issue

So, im trying to create a popup menu with greyed out background when the user clicks on a button in react My code looks something like this:

//ifButtonClicked called another class. this function only runs if another //button is clicked

//some code
export function ifButtonClicked(){
var element = document.createElement("div");
var post_settings = document.createElement("div");
post_settings.className = "post_settings";
post_settings.innerHTML = "button"
post_settings.onclick = (event) => onClickPostSettings(event);
element.append(post_settings);
}

function onClickPostSettings(event){

      //I want it to popup a menu here 
}


*/

Since I cant use HTML tags, I am wondering if there any way I can implement a popup menu on onClick. Should i create a new class and call that class inside the onClickPostsettings?

Solution

I've created a simple popUpMenu using state. You can check this to have some idea.

function App() {
  const [popUpMenu, setPopUpMenu] = React.useState(false);
  return (
    <div className="App">
      <button onClick={() => setPopUpMenu(!popUpMenu)}>
        Menu with Dropdown
      </button>
      {popUpMenu && PopUpMenu()}
    </div>
  );
}

function PopUpMenu() {
  return (
    <ul className="drop-down">
      <li>Menu-item-1</li>
      <li>Menu-item-2</li>
      <li>Menu-item-3</li>
    </ul>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

.drop-down {
  list-style: none;
}

.drop-down li {
  padding: 10px 0px;
  border-bottom: 1px solid #cccccc;
  width: 100px;
  text-align: center;
  background: #fbf6f6;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.7.0-alpha.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.7.0-alpha.2/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answered By - Sifat Haque