Task 1

Consider a Course Management application suitable to read and display module details in a course.

Attempt the following: 1) Create a React component UniversityCourseStudent.js. Using the props parameters, add the following attributes (String type) for the component: name, studentId, courseName, courseStartDate.

2)

As part of App.js create one instance of the UniversityCourseStudent component to display a student record in a course.

Use arbitrary data of your choice.

Task 2

Create a UI panel React component UniversityCourseModulePanel.js. Add the panel component to App.js. Attempt the following: 1)

Create Hook Expressions React.useState(''); to create setter methods for the attributes: moduleName, moduleCode, startDate, endDate, courseName.

2)

Add data entry text fields with data binding for the attributes (add onChange event handler for each text field).

3) Add a button event handler to read the data entered, in a window.alert pop up panel. [15 marks]

Task 3

1) Create a React Component Modules.js, to display modules in a course.

In the props for the component, provide Json data for the module instances to be displayed.

Use the array.map(item =>

) operator to list the modules along with details. Add the component to App.js, providing arbitrary data of your choice for 3 modules to be

displayed in the component.

Task 4

1) Modify your code for the button event handler in UniversityCourseModulePanel component, to display list of modules entered.