List File Boundaries

A panel list.jsx composes the list only. Define its list actions, filters, headers, row, card, form, fields, field, filter, and item in sibling files named listActions.jsx, filters.jsx, headers.jsx, row.jsx, card.jsx, form.jsx, fields.jsx, field.jsx, filter.jsx, and item.jsx. Do not define these concerns inside list.jsx.

Correct

import { List } from 'list'; export default props => <List {...props} />
import Form from './form'; export default props => <List upsert={Form} {...props} />

Incorrect

const Row = props => <tr><td>{props.name}</td></tr>; export default props => <List row={Row} {...props} />
export default props => <List filters={[{ name: 'status' }]} {...props} />
export default props => <form><input name='search' /></form>

Fix

Move each inline list concern into its own sibling file, then let the list resolver or an import compose it.