ReactJS unexpected token in return statement

Question

I want to return nothing if a context variable is set to none.

But I get unexpected token on if?

return (
    <AppContext.Consumer>
        {context => (
            if(context.objects[0] !== "none")
                return;
            <ul>
              {context.objects.map((object, key) => {
                  return <li key={key}>{object.type}
//--- snip ----

Edit: The whole (working) component code is like this

const ObjectList = (props) => {

    return (
        <AppContext.Consumer>
            {context => (
                <ul>
                  {context.objects.map((object, key) => {
                      return <li key={key}>{object.type}&nbsp;
                            <Button
                                key={key}
                                style={{backgroundColor: "red"}}
                                onClick={() => context.deleteObject(key)}
                            >
                                x
                            </Button>
                        </li>
                   })}
                </ul>
            )}
        </AppContext.Consumer>
    );
}

But this always renders 1 li element because objects has "none" as an element when it gets initialized in the context provider:

const [objects, setObjects] = useState(['none']);

I want the list only be drawn, when there is something else than "none" in the objects array.

Can you include info about `AppContext.Consumer`? Providing a Function as a child to that component doesn't seem like it will do anything, and that's why you're getting a lint warning about "no-unused-expressions". — Ross Allen, Dec 10 '19 at 15:38
What info do you need? It was working well without the context.objects[0] !== "none". The issue is just that then I get an ul with one li item that contains a "none". I want to draw the ul only when there's actual object data (anything not "none") on the context. "none" is what the objects array gets initialized with on the context provider state. — user6329530, Dec 11 '19 at 18:03
Additionally I just don't understand the logic behind this js construct here. If I create a function ({context => (.... ), why can't it have an if statement? — user6329530, Dec 11 '19 at 18:04

score 1 · Answer 1 · answered Dec 10 '19 at 13:08

1

Use return null instead of just return.

Refer to this question for more information: Is it possible to return empty in react render function?

answered Dec 10 '19 at 13:08

The GTMD

148
12

score 1 · Answer 2 · answered Dec 10 '19 at 13:08

1

Use curly brackets for the body of an arrow function:

        {context => {

When parentheses are used then inside the parentheses must be a statement, and the return value of that statement becomes the return value of the function.

answered Dec 10 '19 at 13:08

Ross Allen

43,772
14
97
95

This gives Expected an assignment or function call and instead saw an expression no-unused-expressions when canged to {context => { if(context.object ... – user6329530 Dec 10 '19 at 13:25

Rajan Lagah · Answer 3 · 2019-12-12T12:48:57.877

1

You need {}

return (
    <AppContext.Consumer>
        {context => ({  // <- this
            if(context.objects[0] !== "none")
                return;
            return ( // <-and this 
            <ul>
              {context.objects.map((object, key) => {
                  return <li key={key}>{object.type}
//--- snip ----

As () is shorthand if u want to only return the content inside it. No logic. But if you will add if then it will return it and JXS will say unexpected token.

The best approach would be

{context &&  context.objects[0] !== "none" && (<ul>
  {context.objects.map((object, key) => (<li key={key} {object.type}>{object.data}</li></ul>)})}

You can visit Here to have see it working.

edited Dec 12 '19 at 12:48

answered Dec 10 '19 at 13:09

Rajan Lagah

2,373
1
24
40

this gives Parsing error: Unexpected token, expected "," on the dot in if(context.objects – user6329530 Dec 10 '19 at 13:22
That is still not working. Now all context in the scope are undefined: Line 9:14: 'context' is not defined no-undef Line 9:25: 'context' is not defined no-undef Line 11:20: 'context' is not defined no-undef Line 16:48: 'context' is not defined no-undef – user6329530 Dec 11 '19 at 18:00
I think u did not define *context* You can either look at it or upload the full code. – Rajan Lagah Dec 11 '19 at 18:05
It is defined when I have the line start like {context => (
– user6329530 Dec 11 '19 at 18:07
Sorry, codesandbox never worked quite well for me, I only see a white browser tab in there. Anyhow, are you sure to use context[0].objects and not context.objects[0]? You define context as a variable although my context is a react context. – user6329530 Dec 12 '19 at 12:39
@Supertyp it depend. I i declared it as *[{ a: "a", object: [{ b: "adsda" }] }]*. I am updating my ans with screenshot so u can see it – Rajan Lagah Dec 12 '19 at 12:47
Yeah I don't even see the "Hello CodeSandbox" (latest firefox). But that's not the first codesandbox example where this happened, I see it all the time. – user6329530 Dec 12 '19 at 12:50

score 0 · Answer 4 · answered Dec 10 '19 at 14:31

0

You should return null if you don't want to render anything from the component. Like this

return (null);

answered Dec 10 '19 at 14:31

Haris George

291
5
16

ReactJS unexpected token in return statement

4 Answers4