Creating a PersonRenderer

Create a new React component to render the IPerson data type with styles.

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 1400+ tech skills courses.