In this meeting, the State Changers discuss a problem within a feature of an application they are working on, involving a 'select' and 'remove' button feature. The 'select' button is working fine, but the 'remove' button has issues. The 'remove' button is intended to find elements in an array and splice them out, but it's not working as it should and sometimes clears the entire array.
Through a careful deconstruction of the problem, the State Changers identified two main issues. Firstly, the underlying system of the application doesn't recognize when an array has been modified, leading to a 'pointer problem'. The solution was to use the spread operator in JavaScript. This creates a new value that kicks the front-end system into recognizing and redrawing the data. The second issue was related to the index of the array. The 'remove' button function would try to splice an element with an index that doesn't exist, and this would result in a blank array. The State Changers proposed a solution that only iterates over the splice function if it can find the index in the array. Finally, the State Changer suggests that the visibility of the 'select' and 'remove' buttons should depend on whether the element can be found in the selected group. They propose using a conditional test as part of the display property of each card or element. The test would return true if the current item is found in the array; false if otherwise. This test could also dictate which button should be displayed to users. This was classified as a classic state management problem on front-end applications. The overall goal of these discussions was to improve the functionality and user experience of the feature in the application. The main focus was on debugging and improving the 'remove' and 'select' button functions in the application coded in JavaScript. Keywords discussed include JavaScript and arrays. Other concepts explored are the spread operator, mutability, state management, and front-end applications.
(Source: Office Hours 1/31 )
