React App needs Refreshing for updates

Question

I have created a React App and it works just has one thing bothering me. When I hit the add item to it, it takes me to the right page that lists the items added. But I have to refresh this new page to show the added item to the list. Also, in that list page, when I hit the delete button, a modal pops up, when I hit the delete button in the modal, it doesn't delete that item. I have to refresh the page and then the item is deleted! I was hoping that as soon as I hit delete, the modal goes way and item is deleted. I have my code here: IndexItem.js

import React, { Component } from 'react';
import ItemService from './ItemService';
import axios from 'axios';
import TableRow from './TableRow';

        class IndexItem extends Component {

          constructor(props) {
              super(props);
              this.state = {value: '', items: ''};
              this.addItemService = new ItemService();
            }
            componentWillMount(){
              axios.get('http://localhost:4200/items')
              .then(response => {
                this.setState({ items: response.data });
              })
              .catch(function (error) {
                console.log(error);
              })
            }
            tabRow(){
              if(this.state.items instanceof Array){
                return this.state.items.map(function(object, i){
                    return <TableRow obj={object} key={i} />;
                })
              }
            }

            render() {
              return (
                <div className="container">
                    <table className="table table-striped">
                      <thead>
                        <tr>
                          <td>Student ID</td>
                          <td>Student Name</td>
                        </tr>
                      </thead>
                      <tbody>
                        {this.tabRow()}
                      </tbody>
                    </table>
                </div>
              );
            }
          }

        export default IndexItem;

        class TableRow extends Component {

          constructor(props) {
              super(props);
              this.addItemService = new ItemService();
              this.state = {isOpen: false}; 
          }

          toggleModal = () => {
            this.setState({
              isOpen: !this.state.isOpen
            });
          }


          render() {
            return (
                <tr>
                  <td>
                    {this.props.obj._id}
                  </td>
                  <td>
                    {this.props.obj.item}
                  </td>
                  <td>
                  <Link to={"/edit/"+this.props.obj._id} className="btn btn-primary">Edit</Link>
                </td>
                  <td>
                  <button onClick={this.toggleModal}>
                    Delete
                  </button>
                    <ModalItem
                      show={this.state.isOpen}
                      obj={this.props.obj}
                      onClose={this.toggleModal}>
                    </ModalItem>

                  </td>
                </tr>
            );
          }
        }

        export default TableRow;

        import React from 'react';
        import { Link } from 'react-router-dom';
        import PropTypes from 'prop-types';
        import {Modal, Button} from 'react-bootstrap';

         import Item Service from './ItemService';
            class Modaltem extends React.Component {
              constructor(props) {
                super(props);
                this.addItemService = new ItemService();
                this.handleSubmit = this.handleSubmit.bind(this);
              }

              handleSubmit(event) {  
                event.preventDefault();
                this.addItemService.deleteData(this.props.obj._id);
              }
              render() {
                // Render nothing if the "show" prop is false
                if (!this.props.show) {
                  return null;
                }
                else {
                  return (
                    <div className="static-modal">
                      <Modal.Dialog>
                        <Modal.Header>
                          <Modal.Title>Ready to Delete Student</Modal.Title>
                        </Modal.Header>

                        <Modal.Body>Are you sure you want to delete this Student?</Modal.Body>

                        <Modal.Footer>
                          <Button onClick={this.props.onClose}>Close</Button>
                          <form onSubmit={this.handleSubmit}>
                            <input type="submit" value="Delete" className="btn btn-danger" />
                          </form>

                        </Modal.Footer>
                      </Modal.Dialog>
                    </div>
                  );
                }
              }
            }
            }

            export default ModalItem;

        import App from './App';
        import AddItem from './components/AddItem';
        import IndexItem from './components/IndexItem';
        import EditItem from './components/EditItem';

        ReactDOM.render(
          <Router>
              <div>
                <Route exact path='/' component={App} />
                <Route path='/add-item' component={AddItem} />
                <Route path='/index' component={IndexItem} />
                <Route path='/edit/:id' component={EditItem} />
              </div>
          </Router>,
          document.getElementById('root')

    ItemService.js file

        import axios from 'axios';

        class ItemService {

          sendData(data) {
            axios.post('http://localhost:4200/items/add/post', {
              item: data
            })
            .then(res => this.setState({ items: res.data }))
            .catch(err => console.log(err))
          }

          updateData(data, id){
            axios.post('http://localhost:4200/items/update/'+id, {
              item: data
            })
            .then(res => this.setState({ items: res.data }))
            .catch(err => console.log(err))
          }

          deleteData(id){
            axios.get('http://localhost:4200/items/delete/'+id)
            .then().catch(err => console.log(err))
          }
        }

        export default ItemService;

Answer 1

Based on the code that you have provided, the reason the content is not updating is because you are not calling setState function with the changed list of items. React does not re-render until the state changes for that component.