Case Study: React Component for Activity List Display and Data Entry

Task 1: Create a React component Activity.js

This assignment is accompanied with a case study describing a high level system specification for an application.

Consider the case study and attempt the following tasks. As part of your software listing add comments to explain our code.

Task 1

1) Create a React component Activity.js.

Using the props parameters, add suitable attributes (String type) for the component, for example: id, name, moduleName, studentName, activityDate.

As part of App.js create one instance of the Activity component to display one Activity record.

Use arbitrary data of your choice.

Task 2

Create a UI panel React component ActivityPanel.js.

Add the panel component to App.js.

Attempt the following:

1) Create Hook Expressions React.useState(''); to create setter methods for the attributes, you have specified as part of Task 1.

2) Add data entry Input 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.

Task 3

1) Create a React Component ActivityList.js, to display activities. In the props for the component, provide Json data for the activity instances to be displayed.

Use the array.map(item => ) operator to list the activities along with details.

Add the component to App providing arbitrary data of your choice for 3 records to be displayed in the component.

Task 4

1) Modify your code for the button event handler in ActivityPanel component, to display a list of activities entered in a table layout.

At Berkshire Free University (BFU) current fulltime students are invited to enrol and attend weekly scheduled events. During each event, students participate in the help and support activities. Students may obtain academic help and advice from other students studying higher level modules only. In return, students offering their help and support may receive points, which may be exchanged and used for the help they need. Events co-ordinators monitor and authorize help provided between students. Maximum five events may be attended by each student per academic year.