Adding JavaScript Logic to React Components

Back to: ReactJS Tutorials

Adding JavaScript Logic to React Components:

In this article, I am going to discuss Adding JavaScript Logic to React Components with Examples. Please read our previous article where we discussed How to Make React Component Reusable.

Adding JavaScript Logic to React Components:

In our previous article, we learned about props. We’re basically done with our first custom component. The expense item component is now reusable and we can use the props concept to configure it differently every time we’re using it.

Here, we’re using ExpenseItem here 3 times. We’re also getting a different output 3 times. In App.js, we are indeed setting the values for the props dynamically with the single curly brace syntax. But we could also just have a hard-coded value like,

<ExpenseItem title=”Household Expense”></ExpenseItem>

So, props are not limited to dynamically set values. We can set hard-coded values too but we don’t have to. The main idea behind props is always the same though. We want to make sure that we can pass data into our components to make them configurable and reusable.

Now let’s continue working on that expense item component and let’s continue working on that date. Because now, this is clearly not too pretty, not too human readable. And instead of showing it like this, we want to have this calendar-like look which you can see below,

We want to have my date look like this. And therefore, we need to change that JSX code. We need to change that which is responsible for outputting that date. And to build such a calendar look, we could say that inside of that main div which holds the overall date element, we want to have free individual divs like.

Here, the topmost div is responsible for outputting the month, the middle div is responsible for outputting the year and the bottom div shows the date. For the calendar-like view, we have to extract the month, year, and day from the incoming date. We can output a value dynamically and access props.date.

How can we output the month here?

Well, we can use a built-in method that is accessible on all date objects in JavaScript. We can call the toLocaleString method. This is not a React-specific method. You can Google for ‘JS toLocaleString’ to find an official article on this method. This method simply helps you with outputting dates in human-readable formats. And you can simply call it and then pass in two arguments where the first argument is basically the language, so we will use ‘en-US’ and then the second argument is an object where you configure how specifically that date should be formatted. And here we got different options where you can find more details in this article https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString

Here you can learn more about the various ways of configuring toLocaleString and using this. In the second parameter, we can set month to long,

<div>{data.date.toLocaleString(‘en-US’, {month: ‘long’})}</div>

That’s one of the provided options or one of the supported options. And if we do that and save this,

Now, we can see that May, June, and July are being output here. So that we got a human-readable way of outputting that month. As we mentioned earlier when we introduced this syntax, you can have expressions like this between the curly braces but it is considered a better practice, and it leads to cleaner code. We should create a separate helper variable or a constant, like a month which simply holds the value,

const month = data.date.toLocaleString(‘en-US’, {month: ‘long’});

And inside the div, between the curly braces, you just point at that helper variable or a constant. By doing it like this you keep your JSX code clean and you have your more complex logic in the rest of this function so this overall is easier to read. And now we can do something similar for the day and the year.

const year = data.date.getFullYear();
const day = data.date.toLocaleString(‘en-US’, {day: ‘2-digit’});

getFullYear is another built-in method that just extracts the year as a four-digit number. And now we can use these helper constants to output their values in our JSX code as,

<div className=”expense-item__date”>
      <div>{month}</div>
      <div>{year}</div>
      <div>{day}</div>
</div>

And if we do that and save that file, we will see,

Now we can see the month, the year, and also the day of the month. And that’s the raw data that I want to have here. Now, one crucial thing is missing and that would be the styling. But before we add that, we will discuss splitting components.

In the next article, I am going to discuss Splitting Components into Multiple Components in React with Examples. Here, in this article, I try to explain Adding JavaScript Logic to React Components with Examples. I hope you enjoy this Adding JavaScript Logic to React Components article.