React触り始めよくあるエラー

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.

• childrenはpropオブジェクトであるため、childrenの中に本来欲しい値が入っている。
  • 上位コンポーネントからchildrenという値を渡した場合は、{children.children}でエラーは解消できる

const SampleComponent = (children) => {

   return(
      <p> {children} </p>
   )
}

本来はオブジェクトとしてわたってきたことを示すために引数を({children})として受け取るべき。

※補足

オブジェクトのデストラクチャリングにて、
const props = {foo: 1, hoge: 2}を代入する際に、
const {foo} = propsとすることで、numにはpropsのfooが代入される。

Reactコンポーネントの例でも同様に、childrenがオブジェクトとしてそのままわたってきているため、{}で囲むことで引数をデストラクチャリングして受け取る。