javascript - Functions not valid as a React child. This may happen if you return a Component instead of <Component /> from render

Question

This is the error I get while trying to create my first project in React.js, which is simply a sticky notes app. The whole warning displays this:

printWarning    @   react-dom.development.js:61
error   @   react-dom.development.js:37
warnOnFunctionType  @   react-dom.development.js:13277
reconcileChildFibers    @   react-dom.development.js:14168
reconcileChildren   @   react-dom.development.js:17020
finishClassComponent    @   react-dom.development.js:17541
updateClassComponent    @   react-dom.development.js:17465
beginWork   @   react-dom.development.js:19103
beginWork$1 @   react-dom.development.js:23970
performUnitOfWork   @   react-dom.development.js:22809
workLoopSync    @   react-dom.development.js:22737
renderRootSync  @   react-dom.development.js:22700
performSyncWorkOnRoot   @   react-dom.development.js:22323
scheduleUpdateOnFiber   @   react-dom.development.js:21911
updateContainer @   react-dom.development.js:25512
(anonymous) @   react-dom.development.js:26051
unbatchedUpdates    @   react-dom.development.js:22461
legacyRenderSubtreeIntoContainer    @   react-dom.development.js:26050
render  @   react-dom.development.js:26133
(anonymous) @   Inline Babel script:57
hq  @   babel.min.js:1
a   @   babel.min.js:1
yq  @   babel.min.js:1
(anonymous) @   babel.min.js:1
Cq  @   babel.min.js:1
kq  @   babel.min.js:1

Answer 1

the problem is with your render method, remember render should always return the component, you are just returning reference to the function ,so to over come you should make call to the function like

render() { 
  if(this.state.editing) {
    return this.renderForm()
  } else {
    return this.renderDisplay()
  }
}