Next, add the code to handle the event, and open the dialog box.
In order to activate the modal when the row is clicked, the REACT code requires two things. First, a function is defined to handle the event call. Second, the corresponding tag for the event is linked to the JavaScript function.
The exact location of these two elements is a little tricky. In order to have a single modal that handles all rows, the dialog box is defined in the ProductList
component. So the method that handles the modal, and assigns the values to the modal, should be at the ProductList
level.
The link to the browser event, however, is in the <button>
tag. This tag is defined in the ListBox
element.
To hook the two together, we will create the function to handle the event, and then pass a pointer to this function down to each ListBox
element.
First, the selected product must be stored in the component state. We will define this in getInitialState
. In the main.js
file, scroll to the ProductList
component, and replace the getInitialState:
attribute with this new code:
getInitialState: function() {
return {
products: [],
selectedRow: null,
};
},