title: How to update data for table column in react?
body: <p>Hi i have problem with my table in bootstrap. I am getting data from server about timetable. This data i am saving in state. Next i am creating table. (Two ways of creating mobile and pc, just changing position of days and hours). Every column contains component SubjectColumn (there will be more data in one column like class and subject name). So when I click on this subject column i need to open modal with clicked subject data and after choosing of list of subjects in modal, I have to change subject for new one. I get subject data in my modal but i don't know how to change them for new one. Any idea please?</p>
  
  <pre><code>
  export class Schedule extends Component {
      static contextType = LoggedInuserContext;
  
      constructor(props) {
          super(props);
          this.state = {
              editMode: false,
              openModal: false,
              schedule: null,
              modalShow: false,
              mySubjects: null,
              selectedSubject:null
          };
  
          this.resize = () =&gt; this.forceUpdate();
      }
  
      changeModalState() {
          this.setState({modalShow: !this.state.modalShow})
      }
  
  
      selectSubject(subject){
          this.setState({selectedSubject:subject},this.changeModalState);
      }
  
  
      componentDidMount() {
          window.addEventListener('resize', this.resize)
          this.getTimeTable().then(r =&gt;
              this.setState({isScheduleLoaded: true})
          );
          this.getMySubjects();
      }
  
      componentWillUnmount() {
          window.removeEventListener('resize', this.resize)
      }
  
      async getTimeTable() {
          if (this.context == null) return;
          const response = await fetch('UserController/GetTimeTable/' + this.context.user.id + '/' + this.context.company + '/' + this.context.role.id);
          this.setState({schedule: await response.json()});
      }
  
      async getMySubjects() {
          if (this.context == null) return;
          const response = await fetch('SubjectTreeController/GetUserSubjectsList/' + this.context.user.id + '/' + this.context.company + '/' + this.context.role.id);
          this.setState({mySubjects: await response.json()});
      }
  
      createContent() {
          if (!this.state.isScheduleLoaded === true) return;
  
          let header_data = [];
          let body_data = [];
  
          //For mobile else pc
          if (window.innerWidth &lt; 768) {
              //Header of table
              this.state.schedule.days.forEach(day =&gt; {
                  header_data.push(day.name.substring(0, 2))
              });
  
              //Body of table
              for (let i = 0; i &lt; this.state.schedule.days[0].slots.length; i++) {
                  let row = {
                      firstColumn: i,
                      other: []
                  };
                  this.state.schedule.days.forEach((day, key) =&gt; {
                      row.other.push(day.slots[i]);
                  });
  
                  body_data.push(row);
              }
          } else {
              //Header of table
              this.state.schedule.days[0].slots.forEach(slot =&gt; {
                  header_data.push(slot.order)
              });
  
              //Body of table
              this.state.schedule.days.forEach(day =&gt; {
                  let row = {
                      firstColumn: [],
                      other: []
                  };
                  row.firstColumn.push(day.name);
                  day.slots.map(slot =&gt; row.other.push(slot));
                  body_data.push(row);
              });
          }
  
          let head = this.createTableHead(header_data);
          let body = this.createRows(body_data);
  
          return (
              &lt;&gt;
                  &lt;thead&gt;
                  {head}
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                  {body}
                  &lt;/tbody&gt;
              &lt;/&gt;
          );
      }
  
      createTableHead(data) {
          return (
              &lt;tr&gt;
                  &lt;td&gt;&lt;/td&gt;
                  {data.map((d, k) =&gt; {
                      return (&lt;th key={k} className={"text-center"}&gt; {d} &lt;/th&gt;)
                  })}
              &lt;/tr&gt;
          );
      }
  
      createRows(data) {
          const items = [];
          for (let i = 0; i &lt; data.length; i++) {
              const row = [];
  
              for (let j = 0; j &lt; data[i].other.length; j++) {
                  if (data[i].other[j].subject !== null) {
                      row.push(&lt;td key={j} className={"text-center "}&gt;&lt;SubjectColumn editMode={this.state.editMode}
                                                                                     subject={data[i].other[j].subject}
                                                                                      selectSubject={this.selectSubject.bind(this)}&gt;
                      &lt;/SubjectColumn&gt;
                      &lt;/td&gt;);
                  } else {
                      row.push(&lt;td key={j} className={"text-center "}&gt;&lt;SubjectColumn editMode={this.state.editMode}
                                                                                     subject={null}
                                                                                     selectSubject={this.selectSubject.bind(this)}
                                                                                     &gt;
                                                                                     &lt;/SubjectColumn&gt;
                      &lt;/td&gt;);
                  }
              }
  
              items.push(
                  &lt;tr key={i}&gt;
                      &lt;td&gt;{data[i].firstColumn}&lt;/td&gt;
                      {row}
                  &lt;/tr&gt;
              );
          }
          return items;
  
      }
  
      loading() {
          if (this.state.schedule === null)
              return (
                  &lt;div className={"d-flex flex-column justify-content-center text-center"}&gt;
                      &lt;div&gt;
                          &lt;Spinner animation="grow" variant="success"/&gt;
                          &lt;Spinner animation="grow" variant="danger"/&gt;
                          &lt;Spinner animation="grow" variant="warning"/&gt;
                      &lt;/div&gt;
                      &lt;span&gt;Načítam rozvrh&lt;/span&gt;
                  &lt;/div&gt;
              );
      }
  
      showActionButtons() {
          const items = [];
  
          if (this.state.editMode) {
              items.push(&lt;Button key={"save"} className={"px-4 mx-1"} variant={"success"}
                                 onClick={this.startEditing.bind(this)}&gt;Uložiť&lt;/Button&gt;)
          }
          items.push(
              &lt;Dropdown key={"settings"} alignRight&gt;
                  &lt;Dropdown.Toggle variant="dark" id="dropdown-basic"&gt;
                      &lt;FontAwesomeIcon icon={faCog} size={"lg"}/&gt;
                  &lt;/Dropdown.Toggle&gt;
  
                  &lt;Dropdown.Menu&gt;
                      &lt;Dropdown.Item onClick={this.startEditing.bind(this)}&gt;Edituj rozvrh&lt;/Dropdown.Item&gt;
                  &lt;/Dropdown.Menu&gt;
              &lt;/Dropdown&gt;
          );
          return items;
      }
  
      startEditing() {
          this.setState({editMode: !this.state.editMode});
      }
  
  
      openScheduleSetting() {
          console.log("open");
  //        this.setState({openModal: true});
      }
  
      closeScheduleSetting() {
          console.log("close");
  
          //      this.setState({openModal: false});
      }
  
      render() {
          return (
              &lt;div className={"w-100"} id="schedule"&gt;
                  &lt;div className={"d-flex justify-content-center my-2"}&gt;
                      &lt;h3 className={"my-1 text-left flex-grow-1  pl-2"}&gt;Rozvrh hodín&lt;/h3&gt;
                      {this.showActionButtons()}
                  &lt;/div&gt;
                  &lt;Table striped bordered hover&gt;
                      {this.createContent()}
                  &lt;/Table&gt;
                  {this.loading()}
                  &lt;ScheduleSelectModal subject={this.state.selectedSubject} subjectslist={this.state.mySubjects} show={this.state.modalShow} onHide={this.changeModalState.bind(this)}&gt;
                  &lt;/ScheduleSelectModal&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>SubjectColumn</p>
  
  <pre><code>export class SubjectColumn extends Component {
  
      showModalInParrent(){
          console.log(this.props);
          this.props.selectSubject(this.props.subject);
      }
  
      createCell() {
          let items = null;
          if (this.props.editMode) {
              if(this.props.subject === null){
                  return (  &lt;Button className={"w-100 h-100"} onClick={this.showModalInParrent.bind(this)}&gt;  &lt;/Button&gt;)
              }
  
              items = (
                  &lt;Fragment&gt;
                      &lt;Button className={"w-100 h-100"} onClick={this.showModalInParrent.bind(this)}&gt; {this.props.subject.acronym } &lt;/Button&gt;
                  &lt;/Fragment&gt;
              );
              return items;
          } else {
              if(this.props.subject === null){
              return;
              }
  
              return (this.props.subject.acronym  );
          }
      }
  
      render() {
          return (
              &lt;div className="w-100 h-100"&gt;
                  {this.createCell()}
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>Modal:</p>
  
  <pre><code>import React, {Component, Fragment} from "react";
  import Modal from "react-bootstrap/Modal";
  import ButtonGroup from "react-bootstrap/ButtonGroup";
  import Button from "react-bootstrap/Button";
  
  export class ScheduleSelectModal extends Component {
  
     componentDidUpdate(prevProps, prevState, snapshot) {
         console.log("modal props:");
         console.log(this.props.subject);
     }
  
      createList() {
          let items = [];
          if (this.props.subjectslist !== null)
              this.props.subjectslist.map(subject =&gt;
                  items.push(&lt;Button key={subject.id} block className={"my-1"}&gt;{subject.name} &lt;/Button&gt;)
              );
  
          return items;
      }
  
      renderHeader(){
         if(this.props.subject === null){
             return(
                 &lt;p&gt;
                     Vyberťe subjekt ktorý chcete nahradiť
                 &lt;/p&gt;
             )
         }
         else{
            return(   &lt;p&gt;
                {this.props.subject.name }
            &lt;/p&gt;);
          }
      }
  
      render() {
          return (
              &lt;Modal
                  {...this.props}
                  size="lg"
                  aria-labelledby="contained-modal-title-vcenter"
                  centered
              &gt;
                  &lt;Modal.Header closeButton&gt;
                      &lt;Modal.Title id="contained-modal-title-vcenter"&gt;
                          {this.renderHeader()}
                      &lt;/Modal.Title&gt;
                  &lt;/Modal.Header&gt;
                  &lt;Modal.Body&gt;
                      &lt;ButtonGroup vertical className={"w-100"}&gt;
                          {this.createList()}
                      &lt;/ButtonGroup&gt;
                  &lt;/Modal.Body&gt;
              &lt;/Modal&gt;
          );
      }
  }
  </code></pre>
  
  <p>This loos like my shedule object</p>
  
  <pre><code>Object
  id: 1
  dateUpdated: "2020-03-24T17:36:48.66"
  days: Array(5)
  0: {slots: Array(8), id: 1, order: 1, name: "Pondelok", acronym: "PO", …}
  1:
  slots: Array(8)
  0: {order: 0, subject: null, studentGroup: null}
  1: {order: 1, subject: null, studentGroup: null}
  2: {order: 2, subject: {…}, studentGroup: null}
  3:
  order: 3
  subject:
  note: ""
  id: 5
  name: "Biológia"
  acronym: "B"
  __proto__: Object
  studentGroup: null
  __proto__: Object
  4: {order: 4, subject: {…}, studentGroup: null}
  5: {order: 5, subject: null, studentGroup: null}
  6: {order: 6, subject: null, studentGroup: null}
  7: {order: 7, subject: null, studentGroup: null}
  length: 8
  __proto__: Array(0)
  id: 2
  order: 2
  name: "Utorok"
  acronym: "UT"
  isWeekend: 0
  __proto__: Object
  2: {slots: Array(8), id: 3, order: 3, name: "Streda", acronym: "ST", …}
  3: {slots: Array(8), id: 4, order: 4, name: "Štvrtok", acronym: "ŠT", …}
  4: {slots: Array(8), id: 5, order: 5, name: "Piatok", acronym: "PIA", …}
  length: 5
  __proto__: Array(0)
  __proto__: Object
  </code></pre>