Adding an if/else statement within a const

help
1

Hi everyone,

So I have been trying to add an if/else statement within a const and for some reason it’s not working.
This is the current code I have that works:

export const CommentsListBeijing = ({ comments }) => (
  comments.length > 0 ? <ButtonToolbar className="comment-list">
    {comments.map((com) => (
      <CommentsModal key={ com._id } comment={ com } city={com.city} person={com.person} location={com.location} title={com.title} content={com.content} fileLink={com.fileLink} timestamp={com.timestamp} createdBy={com.createdBy}/>
    ))}
  </ButtonToolbar> :
  <Alert bsStyle="warning">No sparks yet. Please add some!</Alert>
);

CommentsListBeijing.propTypes = {
  comments: React.PropTypes.array,
};

But if I then want to add an if/else to it so I can produce a different Modal if com.adminSpark == true, I get an error.

This is my new code:


export const CommentsListBeijing = ({ comments }) => (
  if (comments.length > 0 ) {
    <ButtonToolbar className="comment-list">
    {comments.map((com) => (
      return com.adminSpark ? 
        /* something admin-related */ : 
        <CommentsModal 
          key={ com._id } 
          comment={ com } 
          city={com.city} 
          person={com.person} 
          location={com.location} 
          title={com.title} 
          content={com.content} 
          fileLink={com.fileLink} 
          timestamp={com.timestamp} 
          createdBy={com.createdBy} />
    ))}
    </ButtonToolbar> :
    <Alert bsStyle="warning">No sparks yet. Please add some!</Alert>
 );

After adding this code I get an "imports/ui/components/beijing/comments-list-beijing.js:16:2: Unexpected token (16:2)“
error. Line 16 refers to the place where my first if statement starts: " if (comments.length > 0 ) {”

Can someone explain to me why?

2

Easy. You can only use the ternary operator in this kind of component.

3

Thanks for taking the time to reply. So I can’t use an “normal” if/else statement in a const? Why is that?

4

So if I would want to make use of it, I would have to make it a Class?

5

It has not much to do with the const but rather that you’re using JSX.

You can only use expressions in JSX and if is not an expression.

6

From React docs:

if statements and for loops are not expressions in JavaScript, so they can’t be used in JSX directly. Instead, you can put these in the surrounding code.

So, use a component like:

export const CommentsListBeijing = ({ comments }) => {
  if (comments.length > 0 ) {
   return (
    <ButtonToolbar className="comment-list">
    {comments.map((com) => (
      return com.adminSpark ? 
        /* something admin-related */ : 
        <CommentsModal 
          key={ com._id } 
          comment={ com } 
          city={com.city} 
          person={com.person} 
          location={com.location} 
          title={com.title} 
          content={com.content} 
          fileLink={com.fileLink} 
          timestamp={com.timestamp} 
          createdBy={com.createdBy} />
    ))}
    </ButtonToolbar> 
   );
  } else {
    return (
      <Alert bsStyle="warning">No sparks yet. Please add some!</Alert>
    );
  }
}
7

Aaaaaaaah, ok thanks for making it clear to me! This is was missing. Thank you so much!

8

I want to thank you again @carina! You have no idea how much you helped me here. I have been trying to figure this out for the last two days.

Have a great day and do not forget to smile!

1 Like