CODEWITHSUNDEEP
reactjs
Karthikeyan
Karthikeyan

Reputation: 173

ReactJS Render Component

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.

Upvotes: 0

Views: 1024

Answers (1)

Pranay Tripathi
Pranay Tripathi

Reputation: 1852

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.

Upvotes: 2

Related Questions