gatsby render a collection of children code example

Example: 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>