syntax and comments explaing code for each task and screen shots of outcome per task .tasks answers separated showing please.Functional components should be applied not classical .you can use stackblitz
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]