React "clean practices" pt3

In this article, you will learn two React “shortcuts” for writing cleaner react. This post is part of a larger series entitled “React clean practices”. 

Lets take a look at our first example:

You might be wondering, “What’s wrong with this component?” The answer, “nothing”!This is a perfectly valid component and will render as expected. However, there’s a little redundancy concerning our prop entitled “text”. Because our text prop is expecting a string and not a number, we don’t need to use braces to set its value. We could simply just create a text string as such:

Our next example involves a prop that expects a boolean value:

Here we have a React Native component called “TextInput”. This component has a prop called “secureTextEntry” which must be set to true if you want to keep your users text discrete. Think of a user inputing their “secret” password

Again, you may be asking, “What’s wrong with this component?” And my answer would be the same, “nothing” concerning functionality. But if you want to get rid of redundancy in your code, you could get rid of the boolean value and code this instead:

When implementing a boolean with React, you can shorthand a true value by just typing the prop(that's expecting a boolean) by itself. If you wanted to set a false value, you would need to explicitly set it.

That wraps up today’s lesson. If you learned something, please share with your fellow devs.