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:
It looks the same as any single row from the hard-coded version, but this time we’re outputting each row as a result of the
map() function, iterating over our
users that we brought in as part of the imports section.
Notice that we’ve replaced the static strings with their dynamic counterparts from each
user data object.
We’ve also added an additional
<td> element here too, that will represent our
Actions column data. In this case, it’s a
We’re building up a dynamic URL path to pass to the
Link component which will end up looking like this:
…and so on
We haven’t defined any route to handle this type of URL path just yet, but we’ll discuss that later in the lesson. For now, it’s enough to know that we’re generating a number of similar URL paths, each with a different user id value, appended with a query string parameter,
edited - the value of which is set to the current time returned from our helper function.
The complete updated component#
If you’ve followed all the amendments as above, your complete component should now look like this: