Javascript Question

Task 1
1)
Create a React component Customer.js.
Using the props parameters, add the following attributes (String type) for the component:
id, name, address, companyName, registrationDate.
2)
As part of App.js create one instance of the Customer component to display a customer
record.
Use arbitrary data of your choice.
[10 marks]
Task 2
Create a UI panel React component CustomerPanel.js.
Add the panel component to App.js.
Attempt the following:
3
1)
Create Hook Expressions React.useState(”); to create setter methods for the attributes:
id, name, address, companyName, registrationDate.
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 Customers.js, to display customers.
In the props for the component, provide Json data for the customer instances to be
displayed.
Use the array.map(item =>

) operator to list the customers along with details.
Add the component to App.js, providing arbitrary data of your choice for 3 records to be
displayed in the component.
[10 marks]
Task 4
1)
Modify your code for the button event handler in CustomerPanel component, to display a
list of customers entered in a table layout.
[15 marks]

SAMPLE ASSIGNMENT
Powered by WordPress