Search⌘ K
AI Features

Importing and Displaying the Mock Data

Explore how to import mock data and render it in a React component using TypeScript. Learn to map over data arrays, use unique key props for list elements, and create interfaces for widgets and people to simulate real-world app data.

Import widgets and people

To begin rendering our widgets and people, we need to import them into App.tsx:

TypeScript 3.3.4
import widgets from './mock-data/widgets'
import people from './mock-data/people'

Now, in our return value, we can map over each of these and render some of their data. For the widgets, let’s just render their title by using ...