Children should always be actual children, not passed in as a prop because some components don’t know their children ahead of time. This is especially common for components that represent generic "boxes". This way you can reuse the non-UI functionality between components.

When using JSX, the children should be nested between the opening and closing tags. When not using JSX, the children should be passed as additional arguments to React.createElement.

Bad Practice

// Example 1
<div children='Children' />

// Example 2
<MyComponent children={<AnotherComponent />} />

// Example 3
React.createElement(MyComponent, null,
        React.createElement("span", null, "Child 1"),
        React.createElement("span", null, "Child 2")
);

// Example 4
React.createElement("div", { children: 'Children' })

Recommended

// Example 1
<div>Children</div>

// Example 2
<MyComponent><AnotherComponent /></MyComponent>

// Example 3
<MyComponent>
  <span>Child 1</span>
  <span>Child 2</span>
</MyComponent>

// Example 4
React.createElement("div", {}, 'Children')
React.createElement("div", 'Child 1', 'Child 2')

References

Composition vs Inheritance

msaisrinivas / BlinkListApp

No ignore rules found