title: React.js Uncaught Error: Element type is invalid:
body: <p>I get this error in a browser.</p>
  
  <blockquote>
    <p>expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of <code>Tabbox_order</code>.</p>
  </blockquote>
  
  <p>Here is my 'Tabbox_orber.js' file</p>
  
  <pre><code>import React from "react";
  
  import Walker from './Walker';
  import Order from './Order';
  
  require('../css/Tabbox-order.scss');
  
  const Tabbox_order = (props) =&gt; {
    const Order = props.orders.map((order, index) =&gt; {
      return &lt;Order order={order} key={index} /&gt;
    });
  
    return(
      &lt;div id='tabbox-order'&gt;
        &lt;div id='tabbox-bar'&gt;
          &lt;p&gt;Username&lt;/p&gt;
          &lt;p&gt;Service Details&lt;/p&gt;
          &lt;span&gt;Address&lt;/span&gt;
        &lt;/div&gt;
        &lt;div id='Cutting' &gt;&lt;/div&gt;
        {Order}
      &lt;/div&gt;
    )
  
  }
  
  
  export default Tabbox_order
  </code></pre>
  
  <p>And Here is my 'Order.js' file.</p>
  
  <pre><code>import React from "react";
  
  require('../css/Order.scss');
  
  const Order = ({order}) =&gt; {
  
    return(
  
      &lt;div id='order-info'&gt;
        &lt;div className='infor'&gt;
          &lt;img src='../../img/logo.png'&gt;&lt;/img&gt;
  
          &lt;div&gt;{order.pet.name}&lt;/div&gt;
  
          &lt;div&gt;8 mins ago&lt;/div&gt;
        &lt;/div&gt;
        &lt;div className='infor'&gt;
          &lt;img src='../../img/logo.png'&gt;&lt;/img&gt;
  
          &lt;div&gt;Zichen Wang&lt;/div&gt;
  
          &lt;div&gt;8 mins ago&lt;/div&gt;
        &lt;/div&gt;
        &lt;div className='infor'&gt;
          &lt;img src='../../img/logo.png'&gt;&lt;/img&gt;
  
          &lt;div&gt;Zichen Wang&lt;/div&gt;
          &lt;div&gt;8 mins ago&lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
  
  
    )
  }
  
  export default Order
  </code></pre>
  
  <p>The <code>props.orders</code> in <code>Tabbox.js</code> is an array of objects I passed from <code>Layout.js</code>.</p>
  
  <p>So I used the arrow function to define this component, I don't know what does this error means. Could someone help me? Really appreciated that!</p>
  
  <p>I added <code>console.log</code> inside the <code>props.orders.map</code> function and it works. It prints twice because of the <code>props.order</code> is an array has two object. Now the problem is the <code>Order.js</code> don't show up.</p>