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