How to re-render a react component from out side that component - reactjs

Question

Below is my react code. I have an edit profile route which allows editing the user profile. On completing the mutation request, I want to update the user details (user avatar, firstname and lastname) in header component. How is this done?
import React from 'react';
import Relay from 'react-relay';
import { IndexRoute, Route } from 'react-router';
import Header from './header';
import Sidebar from './sidebar';
import Footer from './footer';
import Query from './Query';
import EditProfile from './routes/Profile';
class App extends React.Component { render() {
return (
<Container {...this.props}>
<Sidebar />
<Header />
<div id='body'>
{this.props.children}
</div>
<Footer />
</Container>
); } }
export default (
<Route path='/' component={App}>
<IndexRoute component={EditProfile} queries={Query} />
</Route>
);

Answer 1

This is basic react communication, and there are several standard ways how to do that. You are already aware that you can pass data from parent to child by using props and refs (probably aware).
To achieve the communication other way around (from child to parent), standard and most simple way is to provide callback inside prop:
class SomeParent extends Component {
// This method is using es6 class properties
// in order to skip .bind(this)
handleChildFunc(someData) => {
console.log(someData)
}
render() {
return <SomeChild someFunc={this.handleChildFunc(this)} />
}
}
Then in the child component you can just do :
this.props.someFunc()
There are also other methods like using the redux/flux store and communicate trough them, using observer pattern etc.
More about this can be read here React component communication