Homework answers / question archive / syntax and comments explaing code for each task and screen shots of outcome per task

syntax and comments explaing code for each task and screen shots of outcome per task

Computer Science

Share With

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]