title: how to fix Objects are not valid as a React child object promise
body: <p>I create an eLearning app using react and want to split routes to many users (pupils, teachers, and admins) so I use this method</p>
  
  <p>NewRoute.js</p>
  
  <pre><code>const NewRoute = ({
      component: Component,
      type: type,
      ...rest
  }) =&gt; (
      &lt;Route
          {...rest}
          render={ async props =&gt; {
              console.log(await CT.checkType(type));
              return CT.checkType(type) === false ? (
                  &lt;Redirect to='/login' /&gt;
              ) : (
                  &lt;Component {...props} /&gt;
              )
          }
          }
      /&gt;
  );
  </code></pre>
  
  <p>checkType.js</p>
  
  <pre><code>export default {
    checkType: async (type) =&gt; {
      try{
        const res = await axios.get('/api/check/');
        console.log('api response',res);
        return true
      } catch(err) {
        console.error(err.message);
        return false
      }
    }
  }
  </code></pre>
  
  <p>Uncaught Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.</p>