# All files / composer/components TooltipList.jsx

100% Statements 5/5
50% Branches 1/2
100% Functions 2/2
100% Lines 5/5

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28

    1x
    2x

    2x

    2x

    1x

     /**
     * Component that takes an array of messages and generates list markup for use in a tooltip
     */
    import React from 'react';
    import PropTypes from 'prop-types';
    import styles from './css/TooltipList.css';

    const TooltipList = (props) => {
      const tooltipListClassName = props.messages.length === 1 ?
        styles.tooltipSingleItemList : styles.tooltipList;

      return (
        <ul className={tooltipListClassName}>
          {props.messages.map((message) => (
            <li className={styles.tooltipListItem} key={message}>
              {message}
            </li>
          ))}
        </ul>
      );
    };

    TooltipList.propTypes = {
      messages: PropTypes.array.isRequired,
    };

    export default TooltipList;