Adding Support for Duplicating Entries

In this lesson, we're going to take a look at how to add the duplication functionality to the details page. First, let's cover how duplication will work.

Explanation of duplication

We're going to implement the "Duplicate" button next to the "Export Student" button for the details page. This way, we can have an overview of all the information that is going to be duplicated. Once the button is clicked, we want two things to happen:

• To create a new student from the current student's information in our state. All information will be identical except the student's ID.

• To navigate the user back to the list of students for an overview of the updated students.

How to duplicate entries

Now that we have a better understanding of what we want to achieve, let's see how this will look in vanilla JavaScript first, then we'll integrate the functionality into our app.

To create the newStudent object, we can use the spread operator to fill it up with the values of the student prop, and then override student.id with a custom value. Let's take a look at how this works in isolation: