react component with children component Objects are not valid as a React child code example

Example 1: Objects are not valid as a React child

// You are probably trying to nest an obect within one of your components
<SomeComponent>
  { property1: 'someText', property2: 69 }  
</SomeComponent>

// You can only use primitives as children such as
// Other components or HTML elements
<SomeComponent>
	<AnotherComponent />
  	<p>Hello, World</p>
</SomeComponent>

// Of course if you really do need the data in the object
// rendered, you can always use map
// You don't have to use a list either, you just need to provide
// the key attribute (array index)
<SomeComponent>
	const someObject = { property1: 'someText', property2: 69 };
	someObject.map(function(item, i) => <li key={i}>{item}</li>)
</SomeComponent>

Example 2: objects are not valid as a react child

// You can't make App an async function... promises must be resolved other ways

// BAD
const App = async () => {
  const auth = await somePromise();
  return (
    <></>
  );
}