React JS - How to rerender Independed component?

Question

I am new to this React JS, please in this question. I Have 4 components(Insert,delete,update and show). when i insert data in Insert component then immediately it should show those details in Show components. Please find my sample code. Thanks in advance for your help.

main.js :

import React from 'react';
import ReactDOM from 'react-dom';

import Insert from './Insert.js';
import Show from './Show.js';
import Delete from './Delete.js';
import Update from './update.js';

ReactDOM.render(<Insert/>, document.getElementById('Insert'))
ReactDOM.render(<Show />, document.getElementById('Show'))
ReactDOM.render(<Delete />, document.getElementById('Delete'))
ReactDOM.render(<Update/>, document.getElementById('Update'))

My Index.html :

  <table border="2" align="center">
  <tr>
        <td>
              <h1> Insert New Record </h1>
               <div id = "Insert"></div>
        </td>
        <td>
              <h1> Show Existing Records </h1>
              <div id = "Show"> </div>
        </td>
  </tr>
  <tr>
        <td>
              <h1> Delete Emp Record </h1>
              <div id="Delete"> </div>
        </td>
        <td>
              <h1> Update Existing Records </h1>
              <div id="update" > </div>
        </td>
  </tr>               
  <script src = "index.js"></script>

Now i need to refresh the Show component whenever i perform insert, update, delete operations.

My sample Insert Component :

import React from 'react';         
import Fetch from 'react-fetch';
import Show from './show'
class Insert extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      Id:0 ,
      name:'' ,
      mobile: '',
      email: '',
      dept : '',
      role :'',
      child : Show
    };

    this.handleSubmit = this.handleSubmit.bind(this);
     this.handleInputChange = this.handleInputChange.bind(this);
  }
   handleInputChange(event) {
      const target = event.target;
      const Id= target.Id;
      const name = target.name;
      const mobile = target.mobile;
      const email = target.email;
      const dept = target.dept;
      const role = target.role;

     this.setState({[Id]: event.target.value});
     this.setState({[name]: event.target.value});
     this.setState({[mobile]: event.target.value});
     this.setState({[email]: event.target.value});
     this.setState({[dept]: event.target.value});
     this.setState({[role]: event.target.value});    
  }

  handleSubmit(event) {

  let employee={
     Id:this.state.Id,
    name:this.state.name,
    mobile:this.state.mobile,
    email:this.state.email,
    dept:this.state.dept,
    role:this.state.role
    }
     fetch('http://localhost:25424/api/Employee/CreateNewEmployee/', {
    method: "POST",
    headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin' : 'http://localhost:7777' ,
    'Access-Control-Allow-Headers'  : 'Origin, X-Requested-With, Content-Type, Accept',
    'Access-Control-Allow-Methods' : 'POST'
    },
    body: JSON.stringify(employee)
    })
    .then(function(resp){

    })
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>

        <label >ID</label>
         <input type="number" name="Id" value={this.state.Id} onChange={this.handleInputChange}  />
         <br/>
         <label >name</label>
         <input type="text" name="name" value={this.state.name} onChange={this.handleInputChange}  />
        <br/>
         <label >Mobile</label>
         <input type="text" name="mobile"  value={this.state.mobile} onChange={this.handleInputChange} />
         <br/>
         <label >Email</label>
         <input type="text" name="email" value={this.state.email} onChange={this.handleInputChange} />
        <br/>
         <label >Dept</label>
         <input type="text" name="dept" value={this.state.dept} onChange={this.handleInputChange}  />
        <br/>
         <label >Role</label>
         <input type="text" name="role" value={this.state.role} onChange={this.handleInputChange}  />
        <br/>

        <input type="submit" value="Submit"   />

      </form>

    );
  }
}

export default Insert;

Answer 1

This is the file structure you need to aim for in a React app

- src/ - components/ - insert.js - delete.js - update.js - show.js - main.js - index.html

for example:

 main.js // should contain all the data(state) and should flow downwards to your child components
    import React, {Component} from 'react';
    import ReactDOM from 'react-dom';
    import 'insert' from /route/to/insert.js
    import 'delete' from /route/to/delete.js
    import 'show' from /route/to/show.js
    import 'update' from /route/to/update.js

    class Main extends Component {
      constructor(props) {
      super(props);
      this.state = {//initialize state object}
      }

      render() {
        return ( //jsx
           <table border="2" align="center">
           <tr>          
            <(insert.js component)/>
            <(delete.js component)/>
           </tr>
           <tr>          
            <(update.js component)/>
            <(show.js   component)/>
           </tr>
        )
      }
    }
    ReactDOM.reder(<Main/>, document.querySelector('one DOM element'))

and then... make each separate components to render out JSX into the main.js

Hope that makes sense :/

Answer 2

You dont have a parent child relationship in between you components. You will need all of this in one parent React component, lets say Main.jsx. and it should look something like this:

Main.jsx:

import React from 'react';         
class Main extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.state = {
      flag: 0,
   }
 handleSubmit(){
    this.setState({flag : this.state.flag});
 }
 render() {
 return(<div>
     <Insert handleSubmit = {this.handleSubmit}/>
     <Show/>
     <Delete/>
     <Update />
    </div>);
  }
}
export default Main

You can put the structure of DOM or layout as per your desire in render. In handleSubmit function m reassigning the same state again so that it can re render. You can also use this.forceUpdate() for this but it is not advisable in some cases. Your handleSubmit function in Insert Component would look need to call the props function as this.props.handleSubmit() so that it can re render the main component which in turn will re render your show update and delete.

Hope it helps.