semantic-ui-react#Divider JavaScript Examples

ErrorMessage = (props) => {
  const { header, body } = props;
  return (
    <Grid.Row>
      <Message icon color="yellow">
        <Icon name="exclamation circle" />
        <Message.Content>
          <Message.Header>{header}</Message.Header>
          <p>{body}</p>
        </Message.Content>
      </Message>
      <Divider hidden />
    </Grid.Row>
  );
}

function Footer() {
  return (
    <div className="footer">
      
        <Container textAlign="center" className="footer__container">
          <Divider inverted section />
          <Image
            centered
            size="mini"
            src="https://img.icons8.com/doodle/96/000000/user-male-circle.png"
            alt="userPic"
          />
          <List horizontal inverted divided link size="small">
            <List.Item as="a" href="https://github.com/Rajangrg">
              By Rajan Gurung
            </List.Item>
            <List.Item as="a" href="https://github.com/Rajangrg/React-Ecommerce-Template">
              Source Code
            </List.Item>
            <List.Item as="a" href="https://github.com/Rajangrg/React-Ecommerce-Template/blob/master/LICENSE">
              MIT License
            </List.Item>
          </List>
        </Container>
     
    </div>
  );
}

render() {
		const validVote = this.validVote();
		const { redirect, loading } = this.state;
		if (redirect) {
			return <VoteDone />;
		}

		return (
			<Grid centered>
				<Grid.Column width={10}>
					<VoteHeader>Vote</VoteHeader>
					<Subheader>Hover over the position name to get its description.</Subheader>
					<Subheader>
						If you leave this page before submitting, your vote will not be counted.
					</Subheader>
					<ProgressBar color="blue" percent={75}></ProgressBar>
					<Divider />
					{loading
						? this.renderLoader()
						: [
								this.renderPositions(),
								<SubmitButton
									fluid
									key="submit"
									size="massive"
									disabled={!validVote}
									color="blue"
									onClick={this.handleSubmit}
								>
									Submit
								</SubmitButton>,
						  ]}
				</Grid.Column>
			</Grid>
		);
	}

FormGroup = (props) => (
  <div style={{ marginBottom: "30px" }}>
    <Header as="h4" content={props.title} />
    <Divider />
    <div style={{ marginLeft: "15px" }}>
      {_.map(props.inputs, (item, key) => (
        <FormField
          key={key}
          label={item.label}
          type={item.type}
          id={item.id}
          options={item.options}
          isInline={props.isInline}
          value={props.inputData[item.id] ? props.inputData[item.id] : ""}
          updateInput={props.updateInput}
        />
      ))}
    </div>
  </div>
)

render() {
    return (
      <Overridable id="AdminMenu.layout">
        <>
          <Divider horizontal>Admin menu</Divider>
          <Menu text vertical className="bo-menu bo-menu-footer">
            <Menu.Item>
              <Menu.Menu>
                <Menu.Item
                  as="a"
                  href={`${invenioConfig.APP.INVENIO_UI_URL}/admin`}
                  target="_blank"
                >
                  Admin panel
                </Menu.Item>
                <Menu.Item
                  as="a"
                  href={`${invenioConfig.APP.INVENIO_UI_URL}/admin/page`}
                  target="_blank"
                >
                  Static pages
                </Menu.Item>
              </Menu.Menu>
            </Menu.Item>
          </Menu>
        </>
      </Overridable>
    );
  }

CommunitySelectionFooter = () => {
  return (
    <>
      <Divider hidden />
      <Container>
        <Segment textAlign="center">
          <p>
            <Trans>
              Did not find a community that fits you? Upload without a community
              or <a href="/communities/new">create your own.</a>
            </Trans>
          </p>
        </Segment>
      </Container>
    </>
  );
}

render() {
    const { post, comments } = this.props;
    if (comments[post.postId]) {
      const fetchedComments = comments[post.postId].comments;
      const hasMore =
        fetchedComments.length === post.commentsCount ? false : true;
      const postComments = fetchedComments.map(comment => (
        <PostComment key={comment._id} comment={comment} post={post} />
      ));
      const fetching = comments[post.postId].fetching;
      return (
        <div className="post-comments">
          <Comment.Group
            size="large"
            onScroll={e => this.handleScroll(e, hasMore)}
            style={{ overflow: "auto", maxHeight: "600px" }}
          >
            {fetching ? <p>loading...</p> : null}
            {postComments.length ? postComments : null}

            {fetchedComments.length && hasMore ? (
              <Fragment>
                <Divider></Divider>
                <Button loading={fetching} onClick={this.fetchData}>
                  Load {post.commentsCount - fetchedComments.length} more
                </Button>
              </Fragment>
            ) : null}
          </Comment.Group>
        </div>
      );
    } else return null;
  }

render() {
    let fRef = null;
    const formSchema = new SimpleSchema2Bridge(this.buildTheFormSchema());
    const model = this.buildTheModel();
    // console.log(model);
    return (
        <Grid container centered>
          <Grid.Column>
            <Divider hidden />
            <AutoForm ref={ref => {
              fRef = ref;
            }} schema={formSchema} model={model} onSubmit={(data) => {
              // console.log('submit', data);
              this.submitData(data, fRef);
            }}
                      style={{
                        paddingBottom: '40px',
                      }}>
              <Segment style={{
                borderRadius: '10px',
                backgroundColor: '#E5F0FE',
              }} className={'createTeam'}>
                <Grid columns={1} style={{ paddingTop: '20px' }}>
                  <Grid.Column style={{ paddingLeft: '30px', paddingRight: '30px' }}>
                    <Header as="h2" textAlign="center">Edit Team</Header>
                    <Message>
                      <Header as="h4" textAlign="center">Team name and Devpost page ALL
                        have to use the same name</Header>
                    </Message>
                    <Grid className='doubleLine'>
                      <TextField name='name' />
                      <RadioField
                          name='open'
                          inline
                      />
                    </Grid>
                    <LongTextField name='description' />
                    <SelectField name='challenge' disabled={!this.props.canChangeChallenges} />
                    <Grid columns={2}>
                      <Grid.Column><MultiSelectField name='skills' /></Grid.Column>
                      <Grid.Column><MultiSelectField name='tools' /></Grid.Column>
                    </Grid>
                    <TextField name="gitHubRepo" label="GitHub Repo" disabled />
                    <TextField name="devPostPage" label="Devpost Page" />
                    <TextField name="affiliation" />
                    <MultiSelectField name='members' />
                  </Grid.Column>
                </Grid>
                <div align='center'>
                  <SubmitField value='Submit'
                               style={{
                                 color: 'white', backgroundColor: '#dd000a',
                                 margin: '20px 0px',
                               }} />
                </div>
                <ErrorsField />
              </Segment>
            </AutoForm>
          </Grid.Column>
        </Grid>
    );
  }

function CheckoutProduct({ id, title, price, rating, imageUrl }) {
  const [, dispatch] = useStateValue();
  const removeFromBasket = () => {
    dispatch({
      type:'REMOVE_FROM_BASKET',
      id
    })
  };

  return (
    <div>
      <Item className="checkoutProduct__item">
        <Item.Image
          size="tiny"
          src={imageUrl}
          className="checkoutProduct__image"
        />
        <Item.Content>
          <Item.Header className="checkoutProduct__title">{title}</Item.Header>
          <Item.Meta>
            {" "}
            <Rating icon="star" defaultRating={rating} maxRating={5} />
          </Item.Meta>
          <Item.Description>
            <span className="checkoutProduct__price">${price}</span>
          </Item.Description>
          <Item.Extra>
            <Button
              color='red'
              className="checkoutProduct__button"
              onClick={removeFromBasket} 
            >
              REMOVE
            </Button>
          </Item.Extra>
        </Item.Content>
        <Divider inverted section />
      </Item>
    </div>
  );
}

DividerPadded = style(Divider)`
  margin-top: 3rem !important;
`

Post = (props) => {
  const { user } = useContext(UserContext);
  const id = props.blog._id;

  const title = props.blog.title;
  const desc = props.blog.summary;

  const summary = props.blog.summary;
  const canonical =
    process.env.NEXT_PUBLIC_BLOG_BASEURL + "/" + props.blog.slug;
  const image = props.blog.image;
  const content = props.blog.content;
  const author = props.blog.author
    ? props.blog.author.firstName + " " + props.blog.author.lastName
    : "Admin";

  const publishedOn = props.blog.createdAt;
  // const lastUpdated = props.blog.updatedAt;

  const seoData = {
    title,
    desc,
    summary,
    canonical,
    image,
  };

  useEffect(() => {
    Prism.highlightAll();
  }, [content]);

  return (
    <Layout seoData={seoData}>
      <Container text>
        <Header as="h1">
          {title}
          <Header.Subheader>
            {author} | <TimeAgo date={publishedOn} />
            {user && (
              <Button floated="right" style={{ marginTop: "-15px" }}>
                <a href={"/dashboard/post/" + id}>Edit</a>
              </Button>
            )}
          </Header.Subheader>
        </Header>

        <div dangerouslySetInnerHTML={{ __html: content }} />

        <Divider />

        {process.env.NEXT_PUBLIC_DISQUS &&
          process.env.NEXT_PUBLIC_DISQUS === "on" && (
            <DiscussionEmbed
              shortname={process.env.NEXT_PUBLIC_DISQUS_SHORTNAME}
              config={{
                url: canonical,
                identifier: props.blog._id,
                title: title,
              }}
            />
          )}
      </Container>
    </Layout>
  );
}

render() {
    const { matchWhole, matchCase, color, colorBg, bold, underline } = this.props;
    return (
      <div className='App'>
        <h2>Keyword Marker: Settings</h2>
        <Form>
          <Divider />
          <Form.Field>
            <Checkbox toggle name='matchWhole' label='Match whole word' defaultChecked={Boolean(matchWhole)} onChange={this.onCheck} />
          </Form.Field>
          <Divider />
          <Form.Field>
            <Checkbox toggle name='matchCase' label='Match case' defaultChecked={Boolean(matchCase)} onChange={this.onCheck} />
          </Form.Field>
          <Divider />
          <Form.Group inline>
            <Form.Field>
              <label>Mark Color:</label>
            </Form.Field>
            <Form.Group inline>
              <Form.Field>
                <input type='color' name='colorBg' className='color-field' title='Background Color' value={colorBg} onChange={this.onColor} />
              </Form.Field>
              <Form.Field>
                <input type='color' name='color' className='color-field' title='Text Color' value={color} onChange={this.onColor} />
              </Form.Field>
            </Form.Group>
          </Form.Group>
          <Divider />
          <Form.Group inline>
            <Form.Field>
              <label>Mark Style:</label>
            </Form.Field>
            <Form.Field>
              <Button.Group>
                <Button icon='bold' name='bold' title='Bold' active={Boolean(bold)} onToggle={this.onToggle} />
                <Button icon='underline' name='underline' title='Underline' active={Boolean(underline)} onToggle={this.onToggle} />
              </Button.Group>
            </Form.Field>
          </Form.Group>
        </Form>
      </div>
    );
  }

RightCol = ({ hasError, errorMessage, errorHeader }) => (
  <Grid.Column
    mobile={16}
    tablet={8}
    computer={8}
    largeScreen={8}
    widescreen={8}
    textAlign="center"
  >
    <Header as="h2" textAlign="center">
      <Icon name="users" size="massive" />
    </Header>
    <p>Choose your preferred method to sign in</p>
    {invenioConfig.APP.ENABLE_OAUTH_LOGIN &&
      Object.keys(invenioConfig.APP.OAUTH_PROVIDERS)
        .filter(
          (providerName) =>
            invenioConfig.APP.OAUTH_PROVIDERS[providerName].enabled
        )
        .map((providerName) => (
          <LoginWithOauthProviders
            key={providerName}
            providerName={providerName}
          />
        ))}
    {invenioConfig.APP.ENABLE_OAUTH_LOGIN &&
      invenioConfig.APP.ENABLE_LOCAL_ACCOUNT_LOGIN && (
        <Divider horizontal>Or</Divider>
      )}
    {invenioConfig.APP.ENABLE_LOCAL_ACCOUNT_LOGIN && (
      <>
        <LoginWithLocalAccount
          hasError={hasError}
          errorHeader={errorHeader}
          errorMessage={errorMessage}
        />
        <Container fluid>
          <p>Forgot your password? Recover {notImplementedPopup}.</p>
        </Container>
        <Media at="mobile">
          <Divider />
          <SignUp />
        </Media>
      </>
    )}
  </Grid.Column>
)

EmbargoAccess = ({access, accessCommunity, metadataOnly}) => {

  const recordPublic = access.record === 'public';
  const filesPublic = access.files === 'public';
  const communityPublic = accessCommunity === 'public';

  const filesRestricted = !metadataOnly && !filesPublic;

  const embargoActive = access.embargo?.active || false;
  const embargoUntil = access.embargo?.until;
  const embargoReason = access.embargo?.reason;
  const embargoWasLifted = !embargoActive && !_isEmpty(embargoUntil);
  const embargoEnabled = communityPublic && (!recordPublic || filesRestricted);

  const fmtDate = embargoUntil ?
    DateTime.fromISO(embargoUntil).toLocaleString(DateTime.DATE_FULL) : '???';

  return (
    <List>
      <List.Item
        disabled={!embargoEnabled}
        data-testid="option-list-embargo"
      >
        <List.Icon>
          <EmbargoCheckboxField
            fieldPath="access.embargo.active"
            checked={embargoActive}
            disabled={!embargoEnabled}
          />
        </List.Icon>
        <List.Content>
          <List.Header>
            <label
              htmlFor='access.embargo.active'
            >
              {i18next.t('Apply an embargo')} <Icon name="clock outline" />
            </label>
          </List.Header>
          <List.Description>
            <Trans>
              Record or files protection must be <b>restricted</b> to apply an
              embargo.
            </Trans>
          </List.Description>
          {embargoActive && (
            <>
              <Divider hidden />
              <EmbargoDateField fieldPath="access.embargo.until" required />
              <TextAreaField
                label={i18next.t('Embargo reason')}
                fieldPath={'access.embargo.reason'}
                placeholder={i18next.t(
                  'Optionally, describe the reason for the embargo.'
                )}
                optimized="true"
              />
            </>
          )}
          {embargoWasLifted && (
            <>
              <Divider hidden />
              <p>
                {i18next.t(`Embargo was lifted on {{fmtDate}}.`, {
                  fmtDate: fmtDate,
                })}
              </p>
              {embargoReason && (
                <p>
                  <b>{i18next.t('Reason')}</b>:{' '}
                  {embargoReason}.
                </p>
              )}
            </>
          )}
        </List.Content>
      </List.Item>
    </List>
  );
}

render() {
    const {
      data: { postsByHashtag, totalPostsByHashtag },
      alert,
      match
    } = this.props;
    const hasMore =
      postsByHashtag.length === totalPostsByHashtag ? false : true;
    const hashtagPosts = postsByHashtag.map(post => {
      return (
        <Link to={"/p/" + post._id} key={post._id}>
          <div className="gallery-item">
            <img
              src={`/images/post-images/thumbnail/${post.photo}`}
              className="gallery-image"
              alt=""
            />

            <div className="gallery-item-info">
              <ul>
                <li className="gallery-item-likes">
                  <span className="visually-hidden">Likes:</span>
                  <Icon name="heart" /> {post.likes}
                </li>
                <li className="gallery-item-comments">
                  <span className="visually-hidden">Comments:</span>
                  <Icon name="comment" /> {post.comments}
                </li>
              </ul>
            </div>
          </div>
        </Link>
      );
    });
    if (alert.type) {
      return (
        <div className="container">
          <Messages alert={alert} />
        </div>
      );
    }
    return (
      <div className="container">
        <div className="hashtag">#{match.params.hashtag}</div>
        <div>
          <p style={{ fontSize: "2rem", paddingBottom: "1%" }}>
            {" "}
            {totalPostsByHashtag} posts
          </p>
          <Divider></Divider>
          <InfiniteScroll
            className="gallery"
            dataLength={hashtagPosts.length} //This is important field to render the next data
            next={this.fetchData}
            hasMore={hasMore}
            loader={<h4>Loading...</h4>}
          >
            {hashtagPosts}
          </InfiniteScroll>
        </div>
        <Divider hidden></Divider>
      </div>
    );
  }

render() {
    let filteredCheckboxes = this.getFilteredOptionsIndexes().map(index => {
      return (
        <tr>
          <td>
            <Checkbox
              checked={this.isIndexSelected(index)}
              label={this.getCheckboxLabel(index)}
              value={this.isIndexSelected(index)}
              onChange={this.toggleChecked(index)}
            />
          </td>
        </tr>
      )
    })

    const max_options_displayed = Math.max(
      this.getOptionIndexes(true).length,
      this.DEFAULT_OPTIONS_DISPLAYED
    )
    const num_options_displayed = Math.min(
      max_options_displayed,
      filteredCheckboxes.length
    )
    filteredCheckboxes = filteredCheckboxes.slice(0, num_options_displayed)
    const displayModalOption =
      this.getAllOptions().length > num_options_displayed

    return (
      <div className="filter-filter">
        <div className="filter-topic">
          <u>{this.getDisplayableName()}</u>
        </div>
        <div className="filter-search">
          <Input
            size="mini"
            icon="search"
            value={this.state.searchQuery}
            placeholder={`Search ${this.props.name}`}
            onChange={this.handleSearchQuery.bind(this)}
          />
        </div>
        <div className="filter-boxes">
          <center>
            <div className="filter-boxes-container">
              <table>
                <tbody>{filteredCheckboxes}</tbody>
              </table>
            </div>
          </center>
        </div>
        <div style={displayModalOption ? {} : { display: "none" }}>
          <FilterModal
            name={this.props.name}
            choices={this.props.choices}
            sortBy={this.props.sortBy}
            order={this.props.order}
            trigger={<div className="filter-view-more">View all</div>}
          />
        </div>
        <div style={this.props.showDivider ? {} : { display: "none" }}>
          <center>
            <Divider className="filter-divider" />
          </center>
        </div>
      </div>
    )
  }

export function LocationFilter({ year, month, day }) {
  const [modalOpen, setModalOpen] = useState(false);
  const handleOpen = useCallback(() => setModalOpen(true), [setModalOpen]);
  const handleClose = useCallback(() => setModalOpen(false), [setModalOpen]);
  const history = useHistory();

  const handleDayClick = useCallback(
    date => {
      history.push(
        `/locations/${date.getFullYear()}-${date.getMonth() +
          1}-${date.getDate()}`
      );
      setModalOpen(false);
    },
    [history, setModalOpen]
  );

  const handleNextClick = useCallback(() => {
    const date = new Date(year, month - 1, day);
    history.push(getDateString(addDays(date, 1)));
  }, [year, month, day, history]);

  const handlePrevClick = useCallback(() => {
    const date = new Date(year, month - 1, day);
    history.push(getDateString(addDays(date, -1)));
  }, [year, month, day, history]);

  return (
    <>
      <Modal size="small" onClose={handleClose} open={modalOpen} basic>
        <Card centered raised>
          <Calendar
            value={new Date(year, month - 1, day)}
            onClickDay={handleDayClick}
          />
        </Card>
      </Modal>
      <Grid>
        <Grid.Column width={3}>
          <Button
            color="teal"
            icon="chevron left"
            fluid
            onClick={handlePrevClick}
          />
        </Grid.Column>
        <Grid.Column width={10}>
          <Button basic color="teal" onClick={handleOpen} fluid>
            <Icon name="calendar" />
            {new Date(
              Number(year),
              Number(month - 1),
              Number(day)
            ).toLocaleDateString()}
          </Button>
        </Grid.Column>
        <Grid.Column width={3}>
          <Button
            color="teal"
            icon="chevron right"
            fluid
            onClick={handleNextClick}
          />
        </Grid.Column>
      </Grid>
      <Divider />
    </>
  );
}

TallDivider = styled(Divider)`
  padding-top: 100px;
`

render() {
        const { classrooms } = this.state;

        const ClassRoomItems = classrooms.map(item =>
            <List.Item 
                key={item.name} 
                as='a'
                onClick={this.onDeleteClick}
            >
            {item.name}
            </List.Item>
        );
        const ListClassRoom = () => (classrooms.length > 0 ? (
            <div>
                <Divider section />
                <Header as='h3'>Click to delete the classroom:</Header>
                <List>
                    {ClassRoomItems}
                </List>
            </div>
        ) : "");

        return (
            <Segment>
              <Header as='h3'>Create or Update a new Classroom</Header>
              <Form onSubmit={this.handleSubmit}>
                <Form.Group widths='equal'>
                  <Form.Input 
                    name='name' 
                    label='Name' 
                    placeholder='Name' 
                    value={this.state.name} 
                    fluid
                    required  
                    onChange={this.handleChange}/>
                </Form.Group>
                <Form.TextArea 
                    name='emails' 
                    label='Student Emails' 
                    placeholder='Each student email per line' 
                    value={this.state.emails} 
                    required  
                    onChange={this.handleChange}/>
                <Button type='submit'>Submit</Button>
              </Form>
              <ListClassRoom/>
              
            </Segment>
        );
    }

/** Render the form. Use Uniforms: https://github.com/vazco/uniforms */
  render() {
    // console.log(this.props.teams);

    function changeBackground(e) {
      e.currentTarget.style.backgroundColor = '#fafafa';
      e.currentTarget.style.cursor = 'pointer';
    }

    function onLeave(e) {
      e.currentTarget.style.backgroundColor = 'transparent';
    }
    // console.log(this.props);
    const isMinor = this.props.participants.minor;
    // console.log(isMinor);
    return (
      <Item onMouseEnter={changeBackground} onMouseLeave={onLeave}
            style={{ padding: '0rem 1.5rem 0.5rem 1.5rem' }}>
        <Modal closeIcon trigger={
          <Item.Content>
            <Item.Header>
              <Header as={'h3'} style={{ color: '#263763', paddingTop: '1.5rem' }}>
                <Icon name='user' size='tiny' />
                {this.props.participants.firstName} {this.props.participants.lastName}
                {this.props.teams.length === 0 ? (<Item.Extra><Icon color='red' name='dont' />No team</Item.Extra>)
                  : ''}
                {_.uniq(this.props.teams).length > 1 ? (<Item.Extra><Icon color='red'
                                                                          name='dont' />Multiple teams</Item.Extra>)
                  : ''}
                {isMinor ? (<Item.Extra><Icon name='child'/>Minor</Item.Extra>) : ''}
              </Header>
            </Item.Header>
            <Item.Description>
              {/* <Grid.Column> */}
              {/*  <Header>About Me</Header> */}
              {/*  {this.props.participants.aboutMe} */}
              {/* </Grid.Column> */}
              <Divider hidden />
              <Grid doubling stackable columns={6}>
                <Grid.Column>
                  <b>Challenges</b><br />
                  <Grid.Column floated={'left'} style={{ paddingBottom: '0.3rem' }}>
                    {this.props.challenges.slice(0, 3).map((challenge, i) => <p
                      style={{ color: 'rgb(89, 119, 199)' }}
                      key={challenge + i}>
                      {challenge}</p>)}
                  </Grid.Column>
                </Grid.Column>
                <Grid.Column>
                  <b>Skills</b><br />
                  {this.props.skills.slice(0, 3).map((skill, i) => <p key={skill + i}>
                    {skill.name}</p>)}
                </Grid.Column>
                <Grid.Column>
                  <b>Tools</b><br />
                  {this.props.tools.slice(0, 3).map((tool, i) => <p key={tool + i}>
                    {tool.name}</p>)}
                </Grid.Column>
                <Grid.Column>
                  <b>Slack Username</b><br />
                  {this.props.participants.username}
                </Grid.Column>
                <Grid.Column>
                  <b>GitHub</b><br />
                  {this.props.participants.gitHub}
                </Grid.Column>
              </Grid>
            </Item.Description>
          </Item.Content>
        }>
          <Modal.Header>
            {this.props.participants.firstName} {this.props.participants.lastName}
            <br /> {this.props.participants.demographicLevel}
          </Modal.Header>
          <Modal.Content image>
            <Modal.Description>
              <Grid container columns={2}>
                <Grid.Column><Icon name="github" />GitHub:<br />
                  <a href={this.props.participants.gitHub}>{this.props.participants.gitHub}</a>
                </Grid.Column>
                <Grid.Column><Icon name="server" />Website:<br />
                  <a href={this.props.participants.website}>{this.props.participants.website}</a>
                </Grid.Column>
                <Grid.Column><Icon name="linkedin" />LinkedIn:<br />
                  <a href={this.props.participants.linkedIn}>{this.props.participants.linkedIn}</a>
                </Grid.Column>
                <Grid.Column><Icon name="slack" />Slack Username:<br />
                  <a href={this.props.participants.username}>{this.props.participants.username}</a>
                </Grid.Column>
              </Grid>
              <Divider hidden />
              <Grid.Column>
                <Header dividing size="small">Challenges</Header>
                <List bulleted>
                  {this.props.challenges.map((challenge, i) => (
                    <List.Item key={challenge + i}>{challenge}</List.Item>
                  ))}
                </List>
              </Grid.Column>
              <Divider hidden />
              <Grid.Column>
                <Header dividing size="small">Skills</Header>
                <List bulleted>
                  {this.props.skills.map((skill, i) => <List.Item key={skill + i}>{skill.name}</List.Item>)}
                </List>
              </Grid.Column>
              <Divider hidden />
              <Grid.Column>
                <Header dividing size="small">Tools</Header>
                <List bulleted>
                  {this.props.tools.map((tool, i) => <List.Item key={tool + i}>{tool.name}</List.Item>)}
                </List>
              </Grid.Column>
              <Divider hidden />
              <Grid.Column>
                <Header dividing size="small">Teams</Header>
                <List bulleted>
                  {_.uniq(this.props.teams).map((team, i) => <List.Item key={team + i}>{team}</List.Item>)}
                </List>
              </Grid.Column>
            </Modal.Description>
          </Modal.Content>
        </Modal>
      </Item>
    );
  }