Extending the Admin Console
With the basics in place, this lesson is all about extending the Admin Console with parameterized routing and query strings.
Extending the Admin Console App#
You should be pretty happy with yourself at this point. Not only have we built a realistic admin console using React and some of its clever features, we’ve also fitted a complete routing system with working navigation.
In this lesson we’re going to extend and augment the existing console with a few additions:
A data list of users that we’ll use to dynamically populate the existing
Userscomponent and a new
Parameterized, dynamic routing that will pluck a specific user from our data list.
A mechanism to handle query string parameters, which are a common requirement in most navigation systems.
Let’s dive right in and edit our project, back in VS Code.
We're going to replace the static, hard-coded user data in the
Users.jsx file with dynamically-generated data. This will simulate a realistic app where we may fetch data from an API or otherwise load it from an external source.
Create a new folder called
/data under the
/src folder. In this new folder create a new file called
Unsurprisingly, we’re going to populate this file with some JSON data, namely an array of user objects. Nothing tricky here, just some regular JS objects representing individual users with properties like
Complete contents of users.json#
The entire JSON file for our users should look like this:
Users component contains a static HTML table with some user data hard-coded in it.
Let’s change this to simulate a realistic fetching of some data and dynamically map some user data into the existing table.
What’s more, we’re going to add a new
actions column to the table. In here, we’ll be placing a button that will allow us to click through to the editing component that we’ll build out later on.
Updating the imports#
Because we want to use a button that directs users to another URL, we’ll bring in the
Link component from
We also need to bring in the user data from the
users.json file we just created, so we do that here too.
We’re going to outline a single helper function here,
getEditTime(). This is a really simple function that creates a new
Date() object, and then crafts a return string from various
Date functions. The returned string represents the current time.
We’ll be using this function to provide us with an edit time in our table’s action links and it’ll be passed to the routing system as a query string parameter value.
Updating the JSX#
We need to make three edits here.
First, we’re going to remove all of the existing table data, i.e. everything inside of the
Next, we’ll add a new header row to our table and name it
The final edit involves adding a new body contents for the table. It’ll look like this: