React update child's props after parent's state change - reactjs

Question

I'm trying to pass Draft.js's editor state from the editor component to my own Sidebar component.
Using the topmost component Notes I use a callback to get the editor state from CustomEditor and set it as the Notes state. I then pass that state to Sidebar as a prop.
The problem is that the prop is set before the callback fires. I was thinking a setTimeout but that seems rough. I'm aware of UNSAFE_componentWillReceiveProps() but the docs don't recommend it. Is there something in react for this use case?
export class Notes extends Component {
constructor(props) {
super(props);
this.getEditorState = this.getEditorState.bind(this)
this.state = {
editorState: "the placeholder data Sidebar should not have as a prop"
};
}
getEditorState(state) {
console.log(state)
this.setState({editorState: state})
}
render() {
return (
<section id="Notes">
<div id="editor-holder">
<Sidebar currentEditorState={this.state.editorState}/>
<div id="Editor">
<FileHeader />
<CustomEditor getState={this.getEditorState}/>
</div>
</div>
</section>
);
}
}
export default Notes;

Answer 1

The new Context API is the solution to this type of problem. Took a bit to get my head around it, but what I came up with gets editorState to Sidebar as a prop.
export const NoteContext = React.createContext("placeholderEditorState");
export class Notes extends Component {
constructor(props) {
super(props);
this.getEditorState = this.getEditorState.bind(this)
this.getFolderData = this.getFolderData.bind(this)
this.state = {
editorState: null,
folderData: null
};
}
getEditorState(state) {
this.setState({editorState: state});
}
getFolderData(data) {
this.setState({folderData : data})
}
render() {
return (
<section id="Notes">
<TopBar />
<div id="editor-holder">
<NoteContext.Provider value={{editorState: this.state.editorState}} >
<NoteContext.Consumer>
{(context)=>{ return (
<Sidebar currentEditorState={context.editorState} getFolderData={this.getFolderData}/>
)}}
</NoteContext.Consumer>
</NoteContext.Provider>
<div id="Editor">
<NoteContext.Provider value={{folderData: this.state.folderData}} >
<FileHeader />
</NoteContext.Provider>
<CustomEditor getState={this.getEditorState}/>
</div>
</div>
</section>
);
}
}
Looking at it now it seems very straightforward, that means I've learnt a lot! Let me know if I can improve anything here.

Answer 2

Well there are more possible options how to achieve this result
Conditional rendering
You can render <Sidebar> only when props has altered that menas
constructor(props)
super(props)
this.state = {
editorState: false
}
}
render() {
... {this.state.editorState && <Sidebar currentEditorState={this.state.editorState}/>}
}
Guard component for undefined/false props
Sidebar.js
render() {
if(!this.props.currentEditorState) return null // this will force React to render nothing
return ( ... )
}
Transition props to state with getDerivedState
https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops
Sidebar.js
static getDerivedStateFromProps({ currentEditorState }, prevState) {
if(currentEditorState !== false {
return { currentEditorState }
} else {
return {}
}
}
render() {
(.... something bound to this.state.currentEditorState)
}
Use context (legacy context)
class Notes extends React.Component {
getEditorState(state) {
console.log(state)
this.setState({editorState: state})
}
getChildContext() {
return {
editorState: this.state.editorState
}
}
childContextTypes = {
editorState: PropTypes.oneOfType([PropTypes.obj, PropTypes.bool])
}
}
Sidebar.js
class Sidebar {
static contextTypes = {
editorState: PropTypes.oneOfType([PropTypes.obj, PropTypes.bool])
}
render() {
... this.context.editorState
}
}