title: React state updating but not showing while render
body: <p>I'm studying about react, I've made a form to save data with react,
  I want to update the table again as data is saved, I've used setState for this purpose, The issue is state updating but not rendering, I've tried some ways to find the issue,</p>
  <ol>
  <li>by using console.log() it is found that the state is properly changing</li>
  <li>render function is properly working after changing state</li>
  </ol>
  <p>here's my code</p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  import Header from &quot;../header&quot;;
  import Table from &quot;./table&quot;;
  import Addbox from &quot;./create__box&quot;;
  import $ from &quot;jquery&quot;;
  import { Api__url } from &quot;../../vars&quot;;
  
  class index extends Component {
    constructor(props) {
      super(props);
      // binding functions
      this.getData = this.getData.bind(this);
      this.table = this.table.bind(this);
      this.show_create_box = this.show_create_box.bind(this);
      // using state
      this.state = {
        data: &quot;Fetching Records....&quot;,
        create_box: &quot;&quot;,
      };
    }
  
    getData() {
      $.ajax({
        type: &quot;POST&quot;,
        url: `${Api__url}services/get`,
        dataType: &quot;JSON&quot;,
        success: this.table,
      });
    }
  
    table(d) {
      this.setState({ data: &lt;Table data={d} /&gt; });
    }
  
    show_create_box() {
      this.setState({create_box: &lt;Addbox top=&quot;15vh&quot; again_get_data={this.getData}/&gt;});
    }
  
    componentDidMount() {
      this.getData();
    }
  
    render() {
      return (
        &lt;&gt;
          &lt;Header /&gt;
          &lt;div className=&quot;container mt-5 px-5&quot;&gt;
            &lt;div className=&quot;border__box p-2 col&quot;&gt;
              &lt;div className=&quot;row m-0 px-3&quot;&gt;
                &lt;div className=&quot;col&quot;&gt;
                  &lt;h2&gt;Services in home page&lt;/h2&gt;
                &lt;/div&gt;
                &lt;div className=&quot;col d-flex justify-content-end&quot;&gt;
                  &lt;button
                    onClick={this.show_create_box}
                    className=&quot;btn btn-outline-success show__create__box&quot;
                  &gt;
                    Add New Data
                  &lt;/button&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div className=&quot;row m-0 py-2 px-4&quot;&gt;{this.state.data}&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          {this.state.create_box}
        &lt;/&gt;
      );
    }
  }
  
  export default index;
  
  ```
  
  the code from the table file
  ```
  import React, { Component } from &quot;react&quot;;
  import Updatebox from &quot;./update__box&quot;;
  
  class table extends Component {
    constructor(props) {
      super(props);
      this.show_update_box = this.show_update_box.bind(this);
      this.delete_record = this.delete_record.bind(this);
      this.state = { update_box: &quot;&quot; };
  
      // making data
      this.tbody = props.data.map((d, index) =&gt; {
        return (
          &lt;tr className=&quot;w-100 row m-0 p-0&quot; id={d.services_id}&gt;
            &lt;th className=&quot;col-1&quot; scope=&quot;row&quot;&gt;
              {index + 1}
            &lt;/th&gt;
            &lt;td className=&quot;col-3&quot;&gt;{d.services_name}&lt;/td&gt;
            &lt;td className=&quot;col-4&quot;&gt;{d.services_description}&lt;/td&gt;
            &lt;td className=&quot;col-2&quot;&gt;{d.services_icon}&lt;/td&gt;
            &lt;td className=&quot;col-1&quot;&gt;
              &lt;button
                onClick={() =&gt; {
                  this.show_update_box(index);
                }}
                className=&quot;btn btn-outline-success&quot;
              &gt;
                Update
              &lt;/button&gt;
            &lt;/td&gt;
            &lt;td className=&quot;col-1&quot;&gt;
              &lt;button
                onClick={() =&gt; {
                  this.delete_record(index);
                }}
                className=&quot;btn btn-outline-danger&quot;
              &gt;
                Delete
              &lt;/button&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
        );
      });
    }
  
    // Function to get close form instruction from another class
    changeStuff(d) {
      this.setState(d);
    }
  
    delete_record(id) {
      alert(id);
    }
  
    show_update_box(key) {
      this.setState({
        update_box: (
          &lt;Updatebox
            data={this.props.data[key]}
            changeHandler={this.changeStuff.bind(this)}
          /&gt;
        ),
      });
    }
  
    render() {
      return (
        &lt;&gt;
          &lt;table className=&quot;position-relative table table-hover &quot;&gt;
            &lt;thead className=&quot;table-dark&quot;&gt;
              &lt;tr className=&quot;row m-0 p-0&quot;&gt;
                &lt;th className=&quot;col-1&quot;&gt;Sr #&lt;/th&gt;
                &lt;th className=&quot;col-3&quot;&gt;Name&lt;/th&gt;
                &lt;th className=&quot;col-4&quot;&gt;Description&lt;/th&gt;
                &lt;th className=&quot;col-2&quot;&gt;Icon&lt;/th&gt;
                &lt;th className=&quot;col-1&quot;&gt;Update&lt;/th&gt;
                &lt;th className=&quot;col-1&quot;&gt;Delete&lt;/th&gt;
              &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;{this.tbody}&lt;/tbody&gt;
          &lt;/table&gt;
          {this.state.update_box}
        &lt;/&gt;
      );
    }
  }
  
  export default table;
  
  ```
  
  here's the code for creating the box
  ```
  import React, { Component } from &quot;react&quot;;
  import CloseIcon from &quot;@mui/icons-material/Close&quot;;
  import $ from &quot;jquery&quot;;
  // import i from &quot;./index&quot;;
  
  export default class Addbox extends Component {
    constructor(props) {
      super(props);
      this.data = { name: &quot;&quot;, description: &quot;&quot;, icon: &quot;&quot; };
      this.state = this.data;
      this.change = this.change.bind(this);
      this.submit = this.submit.bind(this);
      this.changeCSS = this.changeCSS.bind(this);
      this.setCSS = this.setCSS.bind(this);
      this.close_create_box = this.close_create_box.bind(this);
    }
  
    close_create_box() {
      this.props.changeHandler({ create_box: &quot;&quot; });
    }
  
    change(e) {
      var name = e.target.name;
      var value = e.target.value;
      this.setState({
        [name]: value,
      });
    }
  
    changeCSS() {
      $(&quot;#create&quot;).removeClass(&quot;btn-outline-success&quot;);
      $(&quot;#create&quot;).addClass(&quot;btn-outline-dark&quot;);
      $(&quot;#create&quot;).prop(&quot;disabled&quot;, true);
      $(&quot;#create&quot;).text(&quot;Sending....&quot;);
    }
  
    setCSS() {
      $(&quot;#create&quot;).removeClass(&quot;btn-outline-dark&quot;);
      $(&quot;#create&quot;).addClass(&quot;btn-outline-success&quot;);
      $(&quot;#create&quot;).prop(&quot;disabled&quot;, false);
      $(&quot;#create&quot;).text(&quot;Submit&quot;);
    }
  
    submit(e) {
      e.preventDefault();
      $.ajax({
        type: &quot;POST&quot;,
        url: &quot;http://127.0.0.1:8000/api/services/create&quot;,
        data: this.state,
        dataType: &quot;JSON&quot;,
        beforeSend: this.changeCSS,
        success: (e) =&gt; {
          alert(e.message);
          this.props.again_get_data();
          this.close_create_box();
        },
        error: (e) =&gt; {
          this.setCSS();
          alert(e.responseText);
        },
      });
    }
  
    render() {
      return (
        &lt;form
          onSubmit={this.submit}
          className=&quot;add__box create__box&quot;
          method=&quot;POST&quot;
          style={{ top: this.props.top }}
        &gt;
          &lt;div className=&quot;mb-3 row&quot;&gt;
            &lt;div className=&quot;col-10&quot;&gt;
              &lt;h4&gt;Add New Service&lt;/h4&gt;
            &lt;/div&gt;
            &lt;div className=&quot;col-2&quot;&gt;
              &lt;CloseIcon className=&quot;close&quot; onClick={this.close_create_box} /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div className=&quot;mb-3&quot;&gt;
            &lt;label htmlFor=&quot;create_name&quot; className=&quot;form-label&quot;&gt;
              Name
            &lt;/label&gt;
            &lt;input
              id=&quot;create_name&quot;
              name=&quot;name&quot;
              type=&quot;text&quot;
              className=&quot;form-control&quot;
              onChange={this.change}
              value={this.state.name}
              required
              minLength={10}
              maxLength={100}
            /&gt;
          &lt;/div&gt;
          &lt;div className=&quot;mb-3&quot;&gt;
            &lt;label htmlFor=&quot;create_desc&quot; className=&quot;form-label&quot;&gt;
              Description
            &lt;/label&gt;
            &lt;textarea
              id=&quot;create_desc&quot;
              className=&quot;form-control&quot;
              onChange={this.change}
              required
              value={this.state.description}
              minLength={20}
              name=&quot;description&quot;
            &gt;&lt;/textarea&gt;
          &lt;/div&gt;
          &lt;div className=&quot;mb-3&quot;&gt;
            &lt;label htmlFor=&quot;create_icon&quot; className=&quot;form-label&quot;&gt;
              Icon
            &lt;/label&gt;
            &lt;input
              id=&quot;create_icon&quot;
              type=&quot;text&quot;
              className=&quot;form-control&quot;
              onChange={this.change}
              value={this.state.icon}
              required
              name=&quot;icon&quot;
            /&gt;
          &lt;/div&gt;
          &lt;div className=&quot;m-5 row my-0&quot;&gt;
            &lt;button id=&quot;create&quot; type=&quot;submit&quot; className=&quot;btn btn-outline-success&quot;&gt;
              Submit
            &lt;/button&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      );
    }
  }
  
  ```
  </code></pre>