How To Change Table Data In React With Buttons In Modal

Hi i have problem with my react components. I don't know how to update element in table from shared modal for all elements. In my real case i have students timetable and i have to

Solution 1:

This scenario might work for you:

1. add selectedStudent: null, to the Todo component state
2. remove button which have text "Launch vertically centered modal"
3. add new button to each row of students. Name it something like "Select"
4. add new method to Todo component e.g. selectStudent which will have one argument - student object. Also this method might use setState with callback. Callback will open the modal (by changing state modal: true). This method is what will be fired when you click on "Select" button
5. pass new prop to the modal: selectedStudent which value will be this.state.selectedStudent
6. when modal get closed - set selectedStudent to null again

If something seems confusing here or you need further explanation please ask

N.B. you might also remove modal key from state and conditionally render modal only when selectedStudent is an object. When selectedStudent is null - modal should be closed.