Clicking on the current component should trigger the removal of CSS classes on its sibling components in React/JSX

Question

Clicking on the current component should trigger the removal of CSS classes on its sibling components in React/JSX

Currently, I am working on creating a navigation bar using React. This navigation bar consists of multiple navigation items. The requirement is that when a user clicks on a particular navigation item, the class 'active' should be applied to that item. Achieving this functionality is quite simple by keeping track of the new state to determine if it's active.

However, the challenge arises when we need to remove the 'active' class from any other navigation items that currently have it applied. While this can be done easily with jQuery, I suspect that this approach may not align with best practices in React development. Can anyone suggest the most efficient and recommended way to remove the 'active' class from sibling navigation items?

javascript jquery css reactjs

Answer 1

Answer №1

In my opinion, the most effective solution would be to manage this scenario within the container component. It is not necessary for menu items to have knowledge of each other, but the container can possess that information. By providing onClick callbacks to the children components, the container can update its state using setState in those callbacks. Simply pass an 'active' property to your MenuItem component in the render function.

// ES6, React 0.14
var MenuItem = ({onClick, text, active}) => (
    <button 
        onClick={onClick} 
        style={active ? {color: 'red'} : null}
    >
        {text}
    </button>
);

// Example of use: <MenuBar buttons={['cat', 'dog', 'penguin']}/>
class MenuBar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {activeIndex: 0};
    }
    
    handleItemClick(index) {
        this.setState({activeIndex: index});
    }
    
    render() {
        var activeIndex = this.state.activeIndex;
        
        return <div>
            {
                this.props.buttons.map(
                    (btn, i) => (
                        <MenuItem
                            active={activeIndex === i}
                            key={i}
                            onClick={this.handleItemClick.bind(this, i)}
                            text={btn} 
                        />
                    )
                )
            }
        </div>;
    }
}

Answer 2

In my opinion, the most effective solution would be to manage this scenario within the container component. It is not necessary for menu items to have knowledge of each other, but the container can possess that information. By providing onClick callbacks to the children components, the container can update its state using setState in those callbacks. Simply pass an 'active' property to your MenuItem component in the render function.

// ES6, React 0.14
var MenuItem = ({onClick, text, active}) => (
    <button 
        onClick={onClick} 
        style={active ? {color: 'red'} : null}
    >
        {text}
    </button>
);

// Example of use: <MenuBar buttons={['cat', 'dog', 'penguin']}/>
class MenuBar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {activeIndex: 0};
    }
    
    handleItemClick(index) {
        this.setState({activeIndex: index});
    }
    
    render() {
        var activeIndex = this.state.activeIndex;
        
        return <div>
            {
                this.props.buttons.map(
                    (btn, i) => (
                        <MenuItem
                            active={activeIndex === i}
                            key={i}
                            onClick={this.handleItemClick.bind(this, i)}
                            text={btn} 
                        />
                    )
                )
            }
        </div>;
    }
}

Answer 3

Answer №2

Recently delving into the world of React, I am still in the learning phase and far from being an expert. However, I have begun working on creating tabs, and you can view my example here.

My approach involved implementing a conditional isActive state that would change upon a click event. This then resulted in changing the class as follows:

className={this.props.isActive ? "active" : null}

Answer 4

Recently delving into the world of React, I am still in the learning phase and far from being an expert. However, I have begun working on creating tabs, and you can view my example here.

My approach involved implementing a conditional isActive state that would change upon a click event. This then resulted in changing the class as follows:

className={this.props.isActive ? "active" : null}

Clicking on the current component should trigger the removal of CSS classes on its sibling components in React/JSX

Answer №1

Answer №2

Similar questions

Customizing Material UI Components: Implementing the onChange Method

Using jQuery, identify when any of the elements within every function are missing

transition-duration is ineffective in a particular div

Sending various types of data to an MVC C# controller using AJAX

Is it feasible to access a service instance within a parameter decorator in nest.js?

Guide on retrieving HTML content from a URL and showing it in a div

Tips for securely integrating freelancers into your web project

hover over the picture with your cursor

Angular - ngbDropdownMenu items are hidden from view, but their presence is still detectable

Sending Laravel 5.4 Controller Response to Blade Using Ajax (Fixing json_encode() Error with Object Parameter)

How can you delay the return of a function until after another asynchronous call has finished executing?

Dealing with illegal characters, such as the notorious £ symbol, in JSON data within a JQuery

How can we show pictures when a user clicks?

When adjusting styles using Chrome DevTools with Webpack HMR, the page layout can become distorted

What could be causing this axios.get request to fail?

Bringing life to web pages through captivating animations when showing and hiding div elements, utilizing the power

CSS not being properly rendered on newly inserted row within table via jQuery

What is the best way to send a file to a JavaScript function within Django?

The ">" CSS child selector does not seem to be functioning correctly with specific properties

Is it possible for me to develop a mobile application using JavaScript, HTML, and CSS and distribute it for sale on the App Store, Google Play Store, and Microsoft Mobile App Store at