Part 2 (5): Component Containers

Create a primary component (e.g. RandomNumbers) to contain the bulk of the web application, and then add three additional child components to contain the application description, statistics, and data.

Note: You are not required to put these components in separate physical files.

Populate the contents of the description component. You will implement the statistics and data components shortly.

Part 3 (5): Application State Variables

Implement a state variable and state method using the useState hook method to contain the sorted list of randomly generated integers.

Part 4 (5): Buttons and Events

Add a button and button event handler to generate a random integer number. The handler will use state hooks to add the number to the state array variable.

Add another button that uses state hooks to clear the state array variable.

Note: You're welcome to search online for a function to generate a random integer. The function should accept minimum and maximum integers (inclusive) for the random number generation. If you do use an online source for the function, you must document the web source with a single line comment that lists the website URL.

Part 5 (5): Sort data

The button click event handler that generates the random integer must add the integer in sorted order to the state array variable. The sorting must be on a copy of the state array variable, and not the original state array. Below is an outline of the steps of the event handler:

1. Generate random integer
2. Create copy of the state array variable
3. Sort the copy of the state array variable
4. Set the state array variable with the sorted array

Part 6 (5): Data list component

Update the data list component to list the integers. The component will receive the state array data property.

Note: You will need to provide a key property for each integer JSX expression to prevent React displaying an error.

Part 7 (10): Statistics component

Update the statistics component to calculate and display the following information about the list of numbers. This component will also receive the state array data property.

• Count: array length
• Average: average value of all numbers in the array, must use Array reduce() method to calculate the sum of all values
• Minimum: minimum value of all numbers in the array, must use Array reduce() method
• Maximum: maximum value of all numbers in the array, must use Array reduce() method
• Median: Median value of all numbers in the array, where the median value for an odd number of items is the sorted middle value of the array, or the average between the middle two values of an array of even number of items

Note: You're welcome to search online for appropriate statistical functions. If you do use online sources, you must document the web source with a single line comment that lists the website URL.

Tips: To calculate average, you must have count >= 1; otherwise a divide by 0 will result in NaN. When using Array reduce() method, you may not be able to simply use the default value option.