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.
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.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments