Скачать или смотреть Dynamically Update className in React

Learn how to dynamically update the `className` of a component and its sibling in React using `useState` and `useRef`. Follow our simple solutions and code examples!
---
This video is based on the question https://stackoverflow.com/q/73568360/ asked by the user 'babyFrontendDeveloper' ( https://stackoverflow.com/u/18212672/ ) and on the answer https://stackoverflow.com/a/73568769/ provided by the user 'Nury Amandurdyev' ( https://stackoverflow.com/u/14652434/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How can I dynamically update className with React js?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Introduction: The Challenge of Dynamic Class Management in React

As a React developer, you may often find yourself needing to change the className of components dynamically based on user interactions. In this guide, we’ll address a common scenario: how to change the className of a React component and a sibling component when an action, like a click event, occurs.

In this guide, we’ll break down a simple implementation using React hooks, specifically useState and useRef, to achieve this functionality effectively.

Problem Overview

You have a Collection component, and you want to change its className as well as that of its first sibling component when a user clicks on a specific div inside it. However, using just useState might restrict you to only updating the className of the component where the state is defined.

If you've encountered this issue, don’t worry! We will provide a clear solution below.

Solution: Implementing Dynamic Class Changes Using useRef

Step 1: Understanding the Components

Here’s a basic structure of the Collection component before implementing the solution:

[[See Video to Reveal this Text or Code Snippet]]

In this code sample, the handleClick function updates the toggleClass state, which changes the class of the Collection. However, we also want to impact the sibling component immediately after.

Step 2: Using useRef to Reference the Sibling Component

To manipulate the sibling component's class, we will incorporate the useRef hook. This will allow us to access the next sibling directly and modify its class.

Here’s how your updated Collection component should look:

[[See Video to Reveal this Text or Code Snippet]]

Breakdown of the Changes

Importing useRef: This allows us to create a ref that points to our component

Creating a ref: We instantiate a divRef via useRef(null). This will help us track the HTML node of our Collection component.

Updating Handle Click Function: Inside the handleClick function, we access the next sibling of our collection and toggle its class directly.

Conclusion: Simplifying Dynamic Class Changes

By following this method, you can effectively manage class names across sibling components in React, which enhances the user interaction experience. Using both useState and useRef, you can maintain the internal state of your component while also manipulating sibling elements seamlessly.

Are you ready to implement this in your own projects? Start experimenting with the code above and see how easy it is to manage dynamic class updates in your React applications!