title: How to change table data in react with buttons in modal
body: <p>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 edit columns with subjects. After I click on subject in table, modal should open and after i choosed which subject i want to input it should change. I prepeared basic model of situation on codeblox. Please how should i access to specific column throught this modal and update that column with value of button. Thx for help</p>
  
  <p>This is my example on codeblox:</p>
  
  <p>Here is the link: <a href="https://codesandbox.io/s/quizzical-butterfly-g8dr1" rel="nofollow noreferrer">https://codesandbox.io/s/quizzical-butterfly-g8dr1</a>
  <strong>IMPORTANT: You have to remove BUTTON in Todo component and paste it back.. idk why but otherside it not works.</strong>
  !!! i was unable to run bootstrap but it is not important</p>
  
  <pre><code>import ReactDOM from "react-dom";
  import React, { Component } from "react";
  import Modal from "react-bootstrap/Modal";
  import Button from "react-bootstrap/Button";
  
  export default class Col extends Component {
    render() {
      return &lt;div&gt;{this.props.data}&lt;/div&gt;;
    }
  }
  
  class Todo extends Component {
    constructor(props) {
      super(props);
      this.state = {
        items: [
          { Firstname: "Jill", Lastname: "Bill", Age: 18 },
          { Firstname: "Jill2", Lastname: "Bill2", Age: 180 },
          { Firstname: "Jill3", Lastname: "Bill3", Age: 1 }
        ],
        modal: false
      };
    }
  
    renderColumn() {
      return this.state.items.map(i =&gt; (
        &lt;tr&gt;
          &lt;td&gt;
            &lt;Col data={i.Firstname} /&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;Col data={i.Lastname} /&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;Col data={i.Age} /&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      ));
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;table&gt;
            &lt;thead /&gt;
            &lt;tbody&gt;{this.renderColumn()}&lt;/tbody&gt;
          &lt;/table&gt;
          &lt;Button
            variant="primary"
            onClick={() =&gt; this.setState({ modal: true })}
          &gt;
            Launch vertically centered modal
          &lt;/Button&gt;
          &lt;p&gt;------------------------------------------------------&lt;/p&gt;
          &lt;MyModal
            show={this.state.modal}
            onHide={() =&gt; this.setState({ modal: true })}
          /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export class MyModal extends Component {
    render() {
      return (
        &lt;Modal.Dialog&gt;
          &lt;Modal.Header closeButton&gt;
            &lt;Modal.Title&gt;Modal title&lt;/Modal.Title&gt;
          &lt;/Modal.Header&gt;
  
          &lt;Modal.Body&gt;
            &lt;p&gt;Modal body text goes here.&lt;/p&gt;
          &lt;/Modal.Body&gt;
  
          &lt;Modal.Footer&gt;
            &lt;Button variant="secondary"&gt;Mark&lt;/Button&gt;
            &lt;Button variant="primary"&gt;Joseph&lt;/Button&gt;
          &lt;/Modal.Footer&gt;
        &lt;/Modal.Dialog&gt;
      );
    }
  }
  ReactDOM.render(&lt;Todo /&gt;, document.getElementById("root"));
  </code></pre>
  
  <p>Real situation looks like this:
  <a href="https://i.stack.imgur.com/y7Bc3.png" rel="nofollow noreferrer">Modal</a></p>
  
  <p>Those blue buttons are subjects. After i click one of the button in timetable -> modal will open and after i choose one -> value in timetable should change</p>