Скачать или смотреть How to Get the innerText of Clicked Elements in React

Learn how to effectively capture the `innerText` of clicked buttons in a React application, with easy-to-follow code examples and best practices.
---
This video is based on the question https://stackoverflow.com/q/76431253/ asked by the user 'Skeet' ( https://stackoverflow.com/u/16700290/ ) and on the answer https://stackoverflow.com/a/76431392/ provided by the user 'Asplund' ( https://stackoverflow.com/u/13188385/ ) 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 to get text content of a clicked element with React

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.
---
How to Get the innerText of Clicked Elements in React

In React development, you might often find yourself in situations where you want to capture the text of a button or any clickable element when it's clicked by the user. While this can sometimes be straightforward, React's declarative nature suggests several best practices to efficiently handle DOM interactions. This post will guide you through the process of retrieving the innerText of a clicked button in React, along with some important notes on best practices.

The Problem

Suppose you have a group of buttons, and when a user clicks any of them, you want to display the innerText of the clicked button. A common scenario is when you want the text to be displayed dynamically, based on user interaction. This may seem simple at first, but there are nuances to consider when working with React's virtual DOM and state management.

Here’s an example scenario where a user clicks on a button, and you want to show the button's text below it:

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

In the provided code, we are able to get the button’s value when clicked, but what if we want the actual text that’s displayed, and not the value attribute?

The Solution

Using innerText to Get Clicked Button Content

You can capture the innerText directly from the event target when a button is clicked. Here's how you can achieve that:

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

Render the Application

To render this application, you will need to ensure you have a root element in your HTML, like so:

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

Important Considerations

While using innerText, innerHTML, or textContent can be tempting, it is essential to understand that accessing DOM elements directly is generally considered an anti-pattern in React. Here’s why:

Declarative Nature of React: React is built around the concept of a virtual DOM and a declarative programming approach. This means that you should ideally manage state with React state management techniques instead of manipulating the DOM directly.

Maintainability and Readability: Using a store or state to manage component data ensures that your code remains clean, easy to maintain, and less prone to bugs.

Conclusion

Capturing the innerText of clicked elements in a React application can be done effectively by utilizing the event object. However, it’s crucial to align with best practices in React to create maintainable and efficient applications. Using a state to reflect the data you want to display will generally lead to a more efficient and robust implementation.

By following the steps outlined here, you can easily enhance your React applications by dynamically handling user interactions. Happy coding!