Conditional operator returning undefined in render method

Question

I've added some piece of code in render method of react using conditional (ternary) operator. The thing is the condition is rendered true also the control goes into the block. But when I print the value the variable is undefined

I tried inserting an alert inside the block to check if the control traverses the block and it worked.

const comments =
      details.comments_count >= 1
        ? Object.keys(details.comments_list).forEach(keys => {           
            return (
              <ListItem
                alignItems="flex-start"
                key={details.comments_list[keys].aid}
              >
                <ListItemAvatar>
                  <Avatar>{details.comments_list[keys].aname.charAt(0)}</Avatar>
                </ListItemAvatar>
                <Card style={useStyles.card}>
                  <CardContent>
                    <ListItemText
                      primary={details.comments_list[keys].aname}
                      secondary={details.comments_list[keys].content}
                    />
                  </CardContent>
                </Card>
              </ListItem>
            );
          })
        : null;

console.log(comments);
//=>undefined

I don't actually know why this this is happening, given the result of conditional expression is true. Any help is appreciated. Thanks.

Array.prototype.forEach returns undefined. So you get exactly what you implemented. — zerkms
– zerkms, Commented Aug 19, 2019 at 5:34

ravibagul91 · Accepted Answer · 2019-08-19 05:34:33Z

3

forEach won't return anything but undefined. You need to use map.

const comments =
      details.comments_count >= 1
        ? Object.keys(details.comments_list).map(keys => {           
            return (
              <ListItem
                alignItems="flex-start"
                key={details.comments_list[keys].aid}
              >
                <ListItemAvatar>
                  <Avatar>{details.comments_list[keys].aname.charAt(0)}</Avatar>
                </ListItemAvatar>
                <Card style={useStyles.card}>
                  <CardContent>
                    <ListItemText
                      primary={details.comments_list[keys].aname}
                      secondary={details.comments_list[keys].content}
                    />
                  </CardContent>
                </Card>
              </ListItem>
            );
          })
        : null;

console.log(comments);

answered Aug 19, 2019 at 5:34

ravibagul91

20.9k6 gold badges40 silver badges62 bronze badges

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

1 Comment

whitewalker Over a year ago

Works like a charm, never knew forEach returns undefined. Thanks @ravibagul91

Collectives™ on Stack Overflow

Conditional operator returning undefined in render method

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related