React inline conditional return Unexpected token, expected

Question

I would like add inline conditional in my React Component, but i don't understand why, React return Unexpected token, expected on the line posts.length ? :

class PostList extends Component {

  getPosts() {
    const posts = Post.find().fetch();
    return posts;
  }

  render() {
    const posts = this.getPosts();
    return (
      {posts.length ?
        <ul>
          {posts.map((post) => (
            <PostItem key={post.title} post={post} />
          ))}
        </ul>
      }
    );
  }

}

Anyone have idea ? My conditional is wrong ?

Thank you community !

Yes, your conditional is wrong: a ternary expression must have both the ? part and the : part, and you cannot drop an expression into a { } object initializer like that anyway. — Pointy
– Pointy, Commented Jun 2, 2017 at 11:46
@Ollie: That's not valid syntax, is it? I've never seen ?? in JavaScript before, only in C#. — Joe Clay
– Joe Clay, Commented Jun 2, 2017 at 12:05

Anurag Awasthi · Accepted Answer · 2017-06-02 12:11:50Z

4

Return null when expression evaluates as false.Also Dont use the {}, use this ()

class PostList extends React.Component {
    
      getPosts() {
        //const posts = Post.find().fetch();
       const posts = ["post1","post2"]
        return posts;
      }
    
      render() {
        const posts = this.getPosts();
        return (
            posts.length ?
              <ul>
                {posts.map((post) => (
                  <PostItem key={post.title} post={post} />
                ))}
              </ul>:
              null
        )
      }
    
    }
    
    class PostItem extends React.Component{
    render(){
      return (<div>{this.props.post}</div>)
    }
}

ReactDOM.render(<PostList />, document.getElementById("app"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

edited Jun 2, 2017 at 12:11

answered Jun 2, 2017 at 11:46

Anurag Awasthi

6,2532 gold badges21 silver badges34 bronze badges

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

1 Comment

Anurag Awasthi Over a year ago

@Chris Yeah, i got the error. I'll update my answer :)

Chris · Accepted Answer · 2017-06-02 12:05:34Z

1

Here's a slight syntactic variation to anuragasaurus answer.

If there is no "else" in your condition you don't need a ternary expression condition ? value1 : value2. You can instead use a Short-circuit evaluation:

As logical expressions are evaluated left to right, they are tested for possible "short-circuit" evaluation using the following rules:

false && (anything) is short-circuit evaluated to false.

true || (anything) is short-circuit evaluated to true.

The rules of logic guarantee that these evaluations are always correct. Note that the anything part of the above expressions is not evaluated, so any side effects of doing so do not take effect. Also note that the anything part of the above expression is any single logical expression (as indicated by the parentheses).

class PostList extends Component {

  getPosts() {
    const posts = Post.find().fetch();
    return posts;
  }

  render() {
    const posts = this.getPosts();
    return (
      posts.length &&
        <ul>
          {posts.map((post) => <PostItem key={post.title} post={post} />)}
        </ul>
    );
  }    
}

edited Jun 2, 2017 at 12:05

answered Jun 2, 2017 at 11:50

Chris

59.7k20 gold badges121 silver badges144 bronze badges

3 Comments

Anurag Awasthi Over a year ago

It still gives the error .You will need to wrap the code in a div block. So that the component doesn't returns null in some cases.

Chris Over a year ago

@anuragasaurus, I don't think so. A component can return null or false.

Mayank Shukla Over a year ago

@Chris remove {} around {posts.length && .... } it should be return(posts.length && .... )

Collectives™ on Stack Overflow

React inline conditional return Unexpected token, expected

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related