add channelentry comp

src/components/Channel/ChannelEntry.tsx

@@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+
+class ChannelEntry extends Component<ChannelEntryProps> {
+  render() {
+    const { name, subchannels } = this.props.channel;
+    return (
+      <>
+        <div>{name}</div>
+        {subchannels !== undefined && (
+          <ul>
+            {subchannels.map(e => {
+              return <li key={e.id}>{e.name}</li>;
+            })}
+          </ul>
+        )}
+      </>
+    );
+  }
+}
+
+export default ChannelEntry;

src/components/Channel/ChannelList.tsx

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import ChannelService from '../../services/ChannelService';
+import ChannelEntry from './ChannelEntry';
 
 import './ChannelList.scss';
 
@@ -24,12 +25,13 @@ export default class Channellist extends Component<any, any> {
     } else {
       return (
         <ul className='channelList'>
-          {channels.map((e: Channel) => (
+          {channels.map((e: Channel) => {
+            return (
               <li key={e.id}>
-              <span>#{e.id} </span>
+                <ChannelEntry channel={e} />
-              {e.name}
               </li>
-          ))}
+            );
+          })}
         </ul>
       );
     }

src/interfaces.d.ts

@@ -6,6 +6,9 @@ interface Channel {
   subchannels: Channel[];
 }
 
+interface ChannelEntryProps {
+  channel: Channel;
+}
 interface ChannelViewProps {
   channel: Channel;
 }