How to break the tight coupling between these React Presentational Components
<p>Some tutorials/examples of React apps display data in what seems to have tightly coupled components. For example:</p>

<pre><code>class List extends React.Component {
    render() {
        &lt;div className="table-responsive"&gt;
            &lt;table className="table table-hover"&gt;
                &lt;thead&gt;
                    &lt;tr&gt;
                      &lt;th&gt;A&lt;/th&gt;
                      &lt;th&gt;B&lt;/th&gt;
                      &lt;th&gt;C&lt;/th&gt;
                      &lt;th&gt;D&lt;/th&gt;
                    &lt;/tr&gt;
                &lt;/thead&gt;
                &lt;tbody&gt;
                    {items.map(item =&gt; &lt;ListItem key={item.id} ... /&gt;)}
                &lt;/tbody&gt;
            &lt;/table&gt;
        &lt;/div&gt;
    }
</code></pre>

<p>You can imagine how <code>ListItem</code> looks like. There is no way <code>ListItem</code> can be used without <code>List</code> as they must share the same layout.</p>

<p>I don't see how that is helping create re-usable components. Is there a way around it? </p>