title: I can't find the key of the object in question
body: <p>The contents of the error are as follows:
  Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.</p>
  <p>Look react-dom.development.js</p>
  <pre><code> &quot;Objects are not valid as a React child 
  (found: &quot; + (Object.prototype.toString.call(newChild) === '[object Object]' ? 'object with keys {' + Object.keys(newChild).join(', ') + '}' : newChild) + &quot;). 
  If you meant to render a collection of children, use an array instead.&quot;
  </code></pre>
  <pre><code>// This is my code
  
  import React, { Component } from &quot;react&quot;;
  
  class ResponseCheck extends Component {
    state = {
      state: &quot;waiting&quot;,
      message: &quot;Click and Start.&quot;,
      result: [],
    };
  
    timeout;
    startTime;
    endTime;
  
    onClickScreen = () =&gt; {
      const { state } = this.state;
      if (state === &quot;waiting&quot;) {
        timeout.current = setTimeout(() =&gt; {
          this.setState({
            state: &quot;now&quot;,
            message: &quot;Click now&quot;,
          });
          this.startTime = new Date();
        }, Math.floor(Math.random() * 1000) + 2000); // 2초~3초 랜덤
        this.setState({
          state: &quot;ready&quot;,
          message: &quot;Click when it turns green.&quot;,
        });
      } else if (state === &quot;ready&quot;) {
        // 성급하게 클릭
        clearTimeout(this.timeout);
        this.setState({
          state: &quot;waiting&quot;,
          message: &quot;Too hasty.&quot;,
        });
      } else if (state === &quot;now&quot;) {
        // 반응속도 체크
        endTime.current = new Date();
        this.setState((prevState) =&gt; {
          return {
            state: &quot;waiting&quot;,
            message: &quot;Click and Start.&quot;,
            result: [...prevState.result, this.endTime, this.startTime],
          };
        });
      }
    };
  
    onReset = () =&gt; {
      this.setState({
        result: [],
      });
    };
  
    renderAverage = () =&gt; {
      const { result } = this.state;
      return result.length === 0 ? null : (
        &lt;&gt;
          &lt;div&gt;Average Time: {result.reduce((a, c) =&gt; a + c) / result.length}ms&lt;/div&gt;
          &lt;button onClick={this.onReset}&gt;Reset&lt;/button&gt;
        &lt;/&gt;
      );
    };
    render() {
      const { state, message } = this.state;
      return (
        &lt;&gt;
          &lt;div id=&quot;screen&quot; className={state} onClick={this.onClickScreen}&gt;
            {message}
          &lt;/div&gt;
          {this.renderAverage()}
        &lt;/&gt;
      );
    }
  }
  export default ResponseCheck;
  </code></pre>
  <p>What is the problem? Please help...
  I couldn't resolve this problem</p>
  <p>The full error code is below.
  I have added the whole error in the code</p>
  <p>'Look react-dom.development.js' The part above is the same as the number on this line<br />
  react-dom.development.js:13231</p>
  <pre><code>react-dom.development.js:13231 Uncaught Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.
      at throwOnInvalidObjectType (react-dom.development.js:13231)
      at reconcileChildFibers (react-dom.development.js:14133)
      at reconcileChildren (react-dom.development.js:16990)
      at mountIndeterminateComponent (react-dom.development.js:17890)
      at beginWork (react-dom.development.js:19049)
      at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
      at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
      at invokeGuardedCallback (react-dom.development.js:4056)
      at beginWork$1 (react-dom.development.js:23959)
      at performUnitOfWork (react-dom.development.js:22771)
  </code></pre>