Make list use data/render model

website/src/ui/List.js

@@ -6,13 +6,12 @@ import { sizeInfo, colorInfo, fontInfo } from './style'
 
 class List extends Component {
   static propTypes = {
-    children: PropTypes.node,
-    // data: PropTypes.array,
-    // render: PropTypes.func,
+    data: PropTypes.array,
+    render: PropTypes.func.isRequired,
   }
 
   render() {
-    const { children } = this.props
+    const { data, render } = this.props
 
     return (
       <Box
@@ -24,7 +23,7 @@ class List extends Component {
           fontFamily: fontInfo.family,
           overflow: 'scroll',
         }}>
-        {children}
+        {data ? data.map(render) : null}
       </Box>
     )
   }