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
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.