Functions not valid as a React child. This may happen if you return a Component instead of from render

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

Meanwhile, this is how my code looks like:

.note {          width: 250px;          height: 150px;          background-color: yellow;          padding: 15px;          border: 1px solid orange;          box-shadow: 2px 6px 12px rgba(0,0,0,0.2);      }

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>      <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>      <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>    class Note extends React.Component {        constructor(props) {          super(props);          this.state = {              editing: false          }      }      edit = () => {       this.setState = ({editing: true})  }    save = () => {      var val = this.refs.newText.value      alert( "The value will be stored as " + val)      this.setState = ({editing: false})  }    delete() {      alert( 'Deleting' )  }    renderForm = () => {  return (      <div class="note">          <textarea ref="newText"></textarea>      <button onClick={this.save}>Save</button>          </div>  )  }    renderDisplay = () => {      return(            <div className="note">               <p>{this.props.children}</p>              <span>                  <button onClick={this.edit}>Edit</button>                  <button onClick={this.delete}>X</button>                  </span>              </div>      )  }    render() {       if(this.state.editing) {          return this.renderForm      } else {          return this.renderDisplay      }  }  }    ReactDOM.render(<Note>Hello World!</Note>, document.getElementById('react-container'))        </script>

Can anyone help me to correct this? My page is blank and unable to display the note.

I should be able to see a yellow app which allows me to save notes.

https://stackoverflow.com/questions/65526953/functions-not-valid-as-a-react-child-this-may-happen-if-you-return-a-component January 01, 2021 at 10:38AM