Expected an assignment or function call and instead saw an expression in reactjs while using graphcms

Question

Line 11: Expected an assignment or function call and instead saw an expression

This is the error i get every time i run

npm start

in my React JS app i am writing. GraphCMS for CMS. Everything is working fine, except that when I try to map posts, it gives this error.

I suspect the problem might be related to JSHint, but I have no idea how to fix this.

Here is my code:

import React from  'react';
import { Link } from 'react-router-dom';
import  { graphql} from 'react-apollo';
import gql from 'graphql-tag';

const LandingPage = ({data: {loading, allPosts}}) => {
    if(!loading) {
        return (
            <div className="wrapper">
                {allPosts.map(post => { // <-- line 11
                    <article className="content" key={post.id}>
                        <h2>{post.title}</h2>
                        <p dangerouslySetInnerHTML={{__html: post.description}}>
                            <Link to={`/post/${post.slug}`}>
                                <button className="btn">Read More</button>
                            </Link>
                        </p>
                    </article>
                })}
            </div>
        );
    }
    return <h2>Loading Posts...</h2>
};

const allPosts = gql`
    query allPosts {
        allPosts {
            id
            title
            description
            slug
        }
    }
`;

export default graphql(allPosts)(LandingPage);

(A screen shot of the same code)

Answer 1

When you write

allPosts.map(post => { <Article /> })

the right-hand side of the arrow function either needs to be an expression

allPosts.map(post => <Article />)

or a block containing a statement

allPosts.map(post => { return <Article />; })

The JSX <Article /> expands to a JavaScript expression, which can’t be a top-level statement inside curly braces.