Return First Item in Index in React Component

Question

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 & 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 & recentTitleClass.

Here is what I have so far.

  interface IProps {
      comments?: List<Map<{}, {}>>;
      previousTitleClass?: string;
      recentTitleClass?: string;
    }

    type Props = IProps & WithStyles<typeof styles>;
    class Component extends React.Component<Props> {
      public render(): React.ReactNode {
        const { comments } = this.props;

        if (!comments || comments.count() <= 0) {
          return null;
        }

        return comments.map((comment, index) => {
        const shouldHaveClass = index === 0;


          return (
            comment && (
              <React.Fragment key={index}>
                {this.renderComment(comment, shouldHaveClass)}
              </React.Fragment>
            )
          );
        });
      }

      private renderComment(comment: Map<{}, {}>, 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 = (
              <div>
              <Typography
                variant="body2"
                className={classnames(
                  classes.commentFromMentor,
                  "comment-from comment-from--mentor",
                  previousTitleClass,
                  recentTitleClass
                )}>
                Mentor POC
              </Typography>
              </div>
            );
            break;
          case "ROLE_OSBP_SUPPORT":
            from = (
              <Typography
                variant="body2"
                className={classnames(
                  classes.commentFromOsbpSupport,
                  "comment-from comment-from--osbp_support",
                  previousTitleClass,
                  recentTitleClass
                )}>
                Mentor Protégé Program Reviewer
              </Typography>
            );
            break;
          default:
            from = (
              <Typography variant="body2" className="comment-from">
                Unknown Commenter
              </Typography>
            );
            break;
        }

  --------------

how the component is being used in another component

<CommentHistory comments={comments} previousTitleClass={classes.previousTitleClass} recentTitleClass={classes.recentTitleClass}/>

@messerbill updated with renderComment function. what i'm trying to do is make every first index iteration of [0] the style color of #00000 .... and every iteration after that would be gray. — kjamp
– kjamp, Commented Jan 6, 2019 at 21:15

Joelgullander · Accepted Answer · 2019-01-06 23:08:20Z

1

so I don't know exactly what you are asking for but here's an example:

return comments.map((comment, index) => {
  const shouldHaveClass = index === 0;
  return (
    comment && (
      <React.Fragment key={index}>
        {this.renderComment(comment, shouldHaveClass)}
      </React.Fragment>
    )
  );
});

And then update your renderComment to accept another parameter

renderComment(comment: Map<{}, {}>, shouldHaveClass:any

And then finally add

// <---- here
const shouldHaveClassName = shouldHaveClass ? 'IHAVETHECLASS' : null;

         <Typography
            variant="body2"
            className={classnames(
              classes.commentFromMentor,
              "comment-from comment-from--mentor",
              previousTitleClass,
              recentTitleClass,
              shouldHaveClassName // <---- here
            )}>

edited Jan 6, 2019 at 23:08

answered Jan 6, 2019 at 13:48

Joelgullander

1,6943 gold badges23 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

kjamp Over a year ago

This makes perfect sense however I'm getting a "expected 1 arguments, but got 2" on the {this.renderComment} line. What am I missing? @joelgullander

Joelgullander Over a year ago

well, you have to handle the new variable in this.renderComment() to then append a classname to that element.

Joelgullander Over a year ago

so your this.renderComment probably look something like const renderComment = var =>, you need to change to const renderComment = (comment, shouldHaveClass) =>

kjamp Over a year ago

just updated with my this.renderComment function. what i'm trying to do is make every first index iteration of [0] the style color of #00000 .... and every iteration after that would be gray.

Joelgullander Over a year ago

Unfortunately i'm pretty bad with typescript. however you would want private renderComment(comment: Map<{}, {}>, style: any) { to accept the second passed in parameter called shouldHaveClass that should have the type of a boolean

|

Vadim Hulevich · Accepted Answer · 2019-01-06 13:49:06Z

1

you can add special style inside renderComment

if (!comments || comments.count() <= 0) {
    return null;
}

return comments.map((comment, index) => {

    const style = {
        color: "red"
    }

    return (
        comment && (
            <React.Fragment key={index}>
            {this.renderComment(comment,index===0?style:null)}
          </React.Fragment>
        )
    );
});

answered Jan 6, 2019 at 13:49

Vadim Hulevich

1,83312 silver badges17 bronze badges

2 Comments

kjamp Over a year ago

This makes perfect sense however I'm getting a "expected 1 arguments, but got 2" on the {this.renderComment} line. What am I missing? @vadimhulevich

kjamp Over a year ago

just updated the question for clarification because all the answers aren't working for me.

Treycos · Accepted Answer · 2019-01-06 21:21:27Z

1

Simply wrap your comment function in a div and change its classname depending on the index. You can then use a ternary condition to decide which class to apply :

public render(): React.ReactNode {
    const { comments } = this.props;

    if (!comments || comments.count() <= 0) {
        return null;
    }

    return comments.map((comment, index) => {
        return (
            comment && (
                <React.Fragment key={index}>
                    <div className={index ? 'notFirst' : 'first'}>
                        {this.renderComment(comment)}
                    </div>
                </React.Fragment>
            )
        );
    });
}

You can also send the classname to your this.renderComment if you want to :

comment && (
    <React.Fragment key={index}>
        {this.renderComment(comment, index ? 'notFirst' : 'first')}
    </React.Fragment>
)

And add a second parameter in your renderComment function, allowing you to apply the className of the component.

You can then apply different rules in your CSS based on these class names :

.first {
  color: black;
}

.notFirst {
  color: gray;
}

edited Jan 6, 2019 at 21:21

answered Jan 6, 2019 at 20:30

Treycos

7,4913 gold badges29 silver badges53 bronze badges

4 Comments

kjamp Over a year ago

just updated with my this.renderComment function. what i'm trying to do is make every first index iteration of [0] the style color of #00000 .... and every iteration after that would be gray.

kjamp Over a year ago

I think i'm having an issue because it's typescript. when i pass in this private renderComment(comment: Map<{}, {}>, index:any), i'm getting index is declared, but it's value is never read

Treycos Over a year ago

Because you need to use it, to set your class name. and the error is but it's value is never used

kjamp Over a year ago

just updated the question for clarification because all the answers aren't working for me.

Collectives™ on Stack Overflow

Return First Item in Index in React Component

3 Answers 3

6 Comments

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related