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)

add return here: `return (
....
)` or use concise body with map callback method (replace `{}` with `()`), like this: `{allPosts.map(post => ( — Mayank Shukla, Dec 07 '18 at 09:49
Failed to compile ./src/LandingPage.js Line 11: Expected an assignment or function call and instead saw an expression no-unused-expressions Search for the keywords to learn more about each error. — aditya kumar, Dec 07 '18 at 09:50
@MayankShukla putting return there doesn't make any difference. — aditya kumar, Dec 07 '18 at 09:52
@Andreas i putted down the code snapshot you can see the line 11 there. hope that helps. — aditya kumar, Dec 07 '18 at 10:01
@Andreas sorry for that i thought picture is not required here. — aditya kumar, Dec 07 '18 at 10:04
Possible duplicate of [Disable JSHint warning: Expected an assignment or function call and instead saw an expression](https://stackoverflow.com/questions/27623822/disable-jshint-warning-expected-an-assignment-or-function-call-and-instead-saw) — Andreas, Dec 07 '18 at 10:07
@Andreas i don't now how to ignore line in jshint. i need help. — aditya kumar, Dec 07 '18 at 10:10

score 8 · Accepted Answer · answered Dec 07 '18 at 14:35

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.

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

1 Answers1

Related