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>
}