Creating a PersonRenderer
Create a new React component to render the IPerson data type with styles.
We'll cover the following
Now we’ll create a new React component to style our IPerson
data type, like we did with IWidgets
. We’ll also make use of a few Unicode emojis to improve the overall display of the properties, adding a 👤 symbol next to the name and a 🎂 beside the birthday.
Formatting Dates
To easily format each person’s birthday, we’ll use the built-in JavaScript function toLocaleDateString()
. The toLocaleDateString()
function can take optional locale and settings parameters, but when these are not provided, the function uses location of the user’s browser to format the date. This is often a good option for client-facing apps that potentially has users all around the world. Here’s an example of how to use toLocaleDateString
:
Get hands-on with 1200+ tech skills courses.