render()

in src/channelList.js [45:87]


    render() {
        return (
            <Container textAlign='middle'>
              <Table basic='very' selectable textAlign="center" fixed>
                <Table.Header>
                  <Table.Row>
                    <Table.HeaderCell width={1}> No. </Table.HeaderCell>
                    <Table.HeaderCell>Channel Title</Table.HeaderCell>
                    <Table.HeaderCell>Channel Owner</Table.HeaderCell>
                    <Table.HeaderCell>Channel Status</Table.HeaderCell>
                    <Table.HeaderCell>Channel Join</Table.HeaderCell>
                  </Table.Row>
                </Table.Header>
                <Table.Body>
                    {this.state.channel_list.map((channel,index)=> 
                          <Table.Row>
                            <Table.Cell>{index+1}</Table.Cell>
                            <Table.Cell>{channel.title}</Table.Cell>
                            <Table.Cell>{channel.owner}</Table.Cell>
                            {channel.status === "on" && 
                                <Table.Cell>
                                    <Icon.Group size='large'>
                                      <Icon loading color="red" size='large' name='circle notch' />
                                    </Icon.Group>
                                </Table.Cell>
                            }
                            {channel.status === "off" &&
                                <Table.Cell>
                                    <Icon.Group size='large'>
                                     <Icon color='black' name='stop circle' />
                                    </Icon.Group>
                                </Table.Cell>
                            }
                            <Table.Cell>
                                <Button basic color="black" onClick={()=>this.clickHandle(channel)} animated>
                                    <Button.Content visible>JOIN</Button.Content>
                                    <Button.Content hidden>
                                    <Icon name='arrow right' />
                                    </Button.Content>
                                </Button>
                            </Table.Cell>
                          </Table.Row>
                    )}