Task:-
input -> take a number from user on change -> square(number) -> square that number entered by user
Show every calculated number as a list in DOM. We need runtime display of every calculation.
If Backspace pressed- remove last computed result (list as well as input) and on every backspace we've to recalculate everything.
As soon as there is 10 computations, show alert, max 10 computation allowed.
example:- input = 321 [9, 1024, 103041]
32 [9, 1024 ]
323 [9, 1024, 104329]
33 [9, 1089]
Here is a codesandbox with the solution: link
Brief explanation:
value is used to keep track of the user input.results is used to store the squared results, that are then displayed to the user.results is displayed using the Array.toString() methodonChange event in the <input/> field checks if the variable input's length exceeds 10 or not. If it exceeds 10 then no further calculation is allowed, else it sets value to the new input.useEffect hook is called each time value changes. Each time value changes, a new array of sub-strings is formed using the String.substring() method: Say your input was 123, then the formed array would be ["1","12","123"]. This array is then used to calculate and set results