Author avatar

Vivek Kumar

Showing Drop Menu and Hiding Others in React

Vivek Kumar

  • Aug 7, 2019
  • 6 Min read
  • 10 Views
  • Aug 7, 2019
  • 6 Min read
  • 10 Views
Web Development
React

Introduction

Technology always witnesses a never-ending course of transformation. With the advent of small and compact platforms to display information, like Smartphones and tablets, things have become a lot easier for consumers. The transmission of information has become seamless but it brings new forms of challenges for animators every day. They are the challenges to making the content compatible on various information-sharing platforms without compromising with the quality and efficiency.

The display and concealment of various menus on different content streaming platforms take their own skill set. The person using the menu should be able to see a specific portion of the menu to enter the command and hide the other undesired options simultaneously. Basically, it comes handy when the content sharing space is limited and the convenience of the person using the portal or site is required to be upgraded.

One of the key reasons for the creation of this guide is to help you learn how the drop-down menu is professionally displayed when all the other options inside the menu are concealed from view. We are going to proceed with the shortest, yet smartest, format to accomplish our objective along with the most reliable commands that actually stood the test of time. We are also going to resolve certain misconceptions associated with the menu functioning prevailing in the field of animation.

Once you are done with this guide, it is fully assured that you will be able to set your hands in the drop menu function on professional terms and also be able to understand and adapt to any upgrade that takes place in the near future. Now with that, let’s proceed with the guide!

The Standard Approach

While looking at the standard approach of how to show the drop-down menu while hiding others simultaneously in the React.JS framework, it is going to look like the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var Balloon = React.createClass({displayName: "Balloon",
        getInitialState: function() {
            return { shaded: false };
        },         
        handleClick: function(event) {
            this.setState({ shaded: !this.state.shaded });
        },
        render: function() {

            var panel = this.state.shaded ? React.createElement(BalloonPanel, {type: this.props.type, data: this.props.data}) : "";

            return (
                React.createElement("li", {onClick: this.handleClick}, 
                    React.createElement("a", {href: ""}), 
                    React.createElement("div", {hidden: true}), 
                    React.createElement("div", null, 
                        React.createElement("div", {class: "triangle"}, " "), 
                        panel
                    )
                )
            );
        }
    });
jsx

Now, when you look closely at the commands that are shown above, you are going to find that the standard approach of the drop-down menu displays deals in the LI (li) element. Now, during the course of following the standard approach of drop-down menu display, the general misconception that arises among most of our peers is that there is no way to do this unless you insert the LI (li) element. If this particular element is not compatible with the React.JS framework then it is going to function as a glitch and you are required to live with it. But this is not actually true!

We are going to discuss the suggested approach and, with the help of which, you can not only get rid of this glitch in a seamless manner but also attain stability with your drop-down menu.

The Model Approach

We are going to discuss the commands in the right approach by incorporating the aspects of the standard that seem to work perfectly. In the ideal situation, we are taking into consideration the fact that all the drop-downs are reliant upon each other.

Speaking in layman’s term, when you click on a particular option in the menu then the other options end, ascribing to a click event which passes them to the parent. It generally takes place when the command properties for all the options in the menu are made up of the same object.

The commands for this approach include the following:

1
2
3
4
5
6
7
8
9
var ParentComponent = React.createClass({
clicked: function () {
  alert("you clicked me");
},
return: function () {
   render (
       <ReactListChild  onClick={this.props.clicked.bind(this)} />
    )
});
jsx

Now, when you are applying this approach, it is essential that you apply the bind method to ensure that the children are well aware of which one of them has been clicked and respond accordingly.

In a nutshell, we can say that it is necessary for the parent component to possess the state variable, revealing which one is required to be displayed and then set a particular form of variable. It can easily be accomplished by giving a specific name to the particular element. By that approach, that element is not going to be listed and the others will also be hidden in that given state.

Conclusion

In this guide, you learned the correct approach for showing the drop-down menu by hiding others. The functioning of the React list child elements that we discussed above is going to be stable and compatible with diverse information display mediums. If necessary, you can render some sort of loop for multiple child elements, but it is totally your call. It is pertinent to go with the bind in order to get the desired results. If you overlook the same, then things can get out of hand when you are rendering the final result.

Reference

You can further refer the following resource which is also used as a reference for this guide:

0