ReactJS Render Component

Question

I'm new to ReactJS. I should want to re-render a component from some other component. For Example, I have inserted and show component. I want to re-render show component after click submits button of insert component.

Show Component :

import React from 'react';         
import Fetch from 'react-fetch';
import styler from 'react-styling'

class Show extends React.Component {              
  render() {
    return (  
      <div>   
       <h1>Show Component </h1>
      </div>                 
    );
  }
}    
export default Show;

Insert Component :

import React from 'react';         
import Fetch from 'react-fetch';
import styler from 'react-styling'

class Insert extends React.Component {    
  handleSubmit(event) {
             //Some code
    }   
  render() {
    return (
    <form onSubmit={this.handleSubmit}>

     <label >name</label>
     <input type="text" name="name" value={this.state.name} onChange=     
     {this.handleInputChange}  />    
    <input type="submit" value="Submit"   />     
  </form>    
 );
  }
}    
export default Show;

Now I want to call or re-render or refresh show component whenever I click submit button from Insert component. Thanks in advance.

Presumably you would like the content of "ShowComponent" to contain something from the form that you submit? — Tom Fenech
– Tom Fenech, Commented Aug 4, 2017 at 11:56
im doing CRUD operation for Employee Information. I designed everything showing in single page. I have put div tag and rendered 4 components seperately. now when i perform insert,update,delete, than show should re-render to display current information. — Karthikeyan
– Karthikeyan, Commented Aug 4, 2017 at 12:02
The component will re-render when its props or state change. Your form submit should update the state of the app. If you don't understand what I'm talking about then you need to spend some time learning React. — Tom Fenech
– Tom Fenech, Commented Aug 4, 2017 at 12:08
State is mutable and props is immutable. I have used state in my components. Its better if u provide information how to call another component using state or props. — Karthikeyan
– Karthikeyan, Commented Aug 4, 2017 at 12:15
Currently your example is incomplete, as we can't see the relationship between the two components. Why should "ShowComponent" re-render, if it always shows the same thing? — Tom Fenech
– Tom Fenech, Commented Aug 4, 2017 at 12:19

Pranay Tripathi · Accepted Answer · 2017-08-04 12:22:04Z

2

You must have the Insert Component as the react child of the Show component in order to communicate in between two components. The component render can be performed by the changing of state for parent component and changing of props for the child component. In your case none of the conditions are being satisfied. You can also achieve this via flux framework where you can add listener to a Flux Store and add eventListener on your component to re-render with changes in the Store.

Before going to all of this I would suggest that you go through the React concepts more throughly in order to understand state and props behaviours in between components.

answered Aug 4, 2017 at 12:22

Pranay Tripathi

1,8522 gold badges19 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Karthikeyan Over a year ago

its partial code. i guess u can understand more if u visit my another question. stackoverflow.com/questions/45500333/… . The purpose of both questions are same.

Collectives™ on Stack Overflow

ReactJS Render Component

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related