Скачать или смотреть How to Dynamically Reference Object Properties in ReactJS Using Strings

Discover how to eliminate repetitive conditional statements in your ReactJS code by dynamically referencing object properties with strings.
---
This video is based on the question https://stackoverflow.com/q/64536864/ asked by the user 'Squish' ( https://stackoverflow.com/u/6309590/ ) and on the answer https://stackoverflow.com/a/64537031/ provided by the user 'Squish' ( https://stackoverflow.com/u/6309590/ ) 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: Referencing a ReactJS object property using a string

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.
---
Streamlining Object Property Access in ReactJS

When working with ReactJS, it's common to encounter situations where you have to reference properties of an object repeatedly, often leading to verbose and repetitive code. This is particularly true when it comes to rendering lists based on dynamic conditions. In this guide, we'll explore a practical scenario where you can simplify your code by dynamically referencing object properties using strings, ultimately enhancing clarity and maintainability.

The Problem

Imagine you are building a React component that displays Bitcoin rates in different currencies such as USD, GBP, and EUR based on user selection. Here's how the initial implementation looks:

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

As you can see, the list variable is constructed with multiple conditional statements, leading to redundancy. The main issue here is that every conditional will produce a similar structure. If you want to update the list or add another currency, these repetitive checks are not only cumbersome but also error-prone.

The Solution

Instead of repeating similar blocks of code for each currency, we can streamline the process. The idea is to reference the currency object property dynamically using the current state.

Step-by-Step Solution

Define Your Currency Object: First, make sure your currency data structure is defined properly as you've shown.

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

Referencing Properties Dynamically: Instead of hardcoding checks for each currency, you can use the currency state directly in conjunction with your props, like so:

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

Final Render Method: Here is what your complete render method looks like after the refactor:

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

Conclusion

By adopting this approach, you've not only reduced repetition within your code but also made it more readable and easier to maintain. Modifying or adding new currencies in the future becomes a trivial task — you simply update the currency object! This method effectively reduces cognitive load and enhances your development experience in ReactJS.

Now you can focus on building more features instead of repeating yourself in the code. Happy coding!