title: Return First Item in Index in React Component
body: <p>Update to question for clarification: What I'm trying to do here is for every instance where the index === 0, i want to conditionally apply a black class (recentTitleClass) to the typography text. I am passing the two css classes previousTitleClass &amp; recentTitleClass into the component through props. Right now I only want to recentTitleClass used for only the first instance of the array. This array changes if a new comment/title is added, hence the labeling of previousTitleClass &amp; recentTitleClass.</p>
  
  <p>Here is what I have so far.</p>
  
  <pre><code>  interface IProps {
        comments?: List&lt;Map&lt;{}, {}&gt;&gt;;
        previousTitleClass?: string;
        recentTitleClass?: string;
      }
  
      type Props = IProps &amp; WithStyles&lt;typeof styles&gt;;
      class Component extends React.Component&lt;Props&gt; {
        public render(): React.ReactNode {
          const { comments } = this.props;
  
          if (!comments || comments.count() &lt;= 0) {
            return null;
          }
  
          return comments.map((comment, index) =&gt; {
          const shouldHaveClass = index === 0;
  
  
            return (
              comment &amp;&amp; (
                &lt;React.Fragment key={index}&gt;
                  {this.renderComment(comment, shouldHaveClass)}
                &lt;/React.Fragment&gt;
              )
            );
          });
        }
  
        private renderComment(comment: Map&lt;{}, {}&gt;, shouldHaveClass:any) {
          const { classes, previousTitleClass, recentTitleClass } = this.props;
          const recentTitleClass = shouldHaveClass ? "commentFromOsbpSupport" : null;
  
          let from: React.ReactNode;
          switch (comment.getIn(["from", "role"])) {
            case "ROLE_MENTOR":
              from = (
                &lt;div&gt;
                &lt;Typography
                  variant="body2"
                  className={classnames(
                    classes.commentFromMentor,
                    "comment-from comment-from--mentor",
                    previousTitleClass,
                    recentTitleClass
                  )}&gt;
                  Mentor POC
                &lt;/Typography&gt;
                &lt;/div&gt;
              );
              break;
            case "ROLE_OSBP_SUPPORT":
              from = (
                &lt;Typography
                  variant="body2"
                  className={classnames(
                    classes.commentFromOsbpSupport,
                    "comment-from comment-from--osbp_support",
                    previousTitleClass,
                    recentTitleClass
                  )}&gt;
                  Mentor Protégé Program Reviewer
                &lt;/Typography&gt;
              );
              break;
            default:
              from = (
                &lt;Typography variant="body2" className="comment-from"&gt;
                  Unknown Commenter
                &lt;/Typography&gt;
              );
              break;
          }
  
    --------------
  </code></pre>
  
  <p>how the component is being used in another component</p>
  
  <pre><code>&lt;CommentHistory comments={comments} previousTitleClass={classes.previousTitleClass} recentTitleClass={classes.recentTitleClass}/&gt;
  </code></pre>