title: Invariant Violation: Objects are not valid as a React child (found: object with keys {name})
body: <p>I have this exception:</p>
  <blockquote>
  <p>Invariant Violation: Objects are not valid as a React child (found:
  object with keys {name}). If you meant to render a collection of
  children, use an array instead. in h1 (created by Contact) in Contact
  (created by App) in div (created by App) in App
  (/node_modules/fbjs/lib/invariant.js:42)</p>
  </blockquote>
  <p>what am i doing wrong?</p>
  <pre><code>
  
  import React from &quot;react&quot;
  
  
  
  export default function Contact(name){
      return &lt;h1&gt;hi {name}!&lt;/h1&gt;
  }
  
  -------------------------------------------
  import React from &quot;react&quot;
  import Contact from &quot;./Contact.js&quot;
  
  function App() {
      return (
          &lt;div className=&quot;contacts&quot;&gt;
            &lt;Contact(&quot;Ed&quot;)/&gt;          
          &lt;/div&gt;
      )
  }
  
  export default App
  
  -------------------------------------
  import React from &quot;react&quot;
  import ReactDOM from &quot;react-dom&quot;
  
  import App from &quot;./App&quot;
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById(&quot;root&quot;))```
  
  
  
  
  </code></pre>