render()

in src/myChannels.js [131:165]


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 Info</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>
                                    <Button basic color="red" onClick={()=>this.stopHandle(channel)} labelPosition='left' icon>
                                      <Icon name='pause' />
                                      STOP
                                    </Button>
                                </Table.Cell>
                            }
                            {channel.status === "off" &&
                                 <Table.Cell>
                                    <Button basic color="black" onClick={()=>this.startHandle(channel)} labelPosition='left' icon>
                                      <Icon name='play' />
                                      START
                                    </Button>
                                </Table.Cell>
                            }