Launching a Component an Click [React]
Creating my portfolio website I wondered on how I would create a drawer for mobile responsiveness. That’s when the idea of creating a modal came up but there arose another problem. How will the modal component appear upon clicking the hamburger button. I searched through the web and found many ideas, techniques and implementations but I did not like most of them
So I came with up with the ideas of passing state and function to the modal as a prop which was both simple and also neat
First I created my modal.js file
The modal.js file accepts two props the show and toggle prop. It checks if show is true or false. If show is false it will render nothing but if show is true it will render the content
Then I create my Parent Component which we will be passing the props data down to the modal component
We use the useState hook to manage the isShow state. Initially setting it to false since we want our modal to be hidden.
We then create a toggle function which will change the isShow state between true and false.
We then pass the toggle function to the button and pass it down as a prop to modal component.
And that is how you can simply create modals and drawers in React. 🎉🎉
You can follow me on github and twitter and checkout my website 🌐
Happy Coding 🎊🎊
