React JS: Syntax error: Unexpected token

Question

I've been using this code

{this.state.display === true ?
      this.state.content.map((q) => {
        <Content
          id={q.id}
          key={q.id}
          content={q.content}
          deleteRow={this.deleteRow()}
        />
      })
      <AppForm />

inside my return method in React, everything works aslong as I dont add the AppForm,but when I add AppForm it gives me an error: Syntax error: Unexpected token.

Can you please help me? Thanks.

Edited:

I want both Content and AppForm to be shown if the user is logged in (display is true)

Here is my complete render code:

return (
  <div>
    {this.state.display === true ?
      this.state.content.map((q) => {
        <Content
          id={q.id}
          key={q.id}
          content={q.content}
          deleteRow={this.deleteRow()}
        />
      })
      <AppForm />
    : this.state.display === false ?
      <Forms
        create={this.createUser}
        sign={this.signUser}
      />
    : 'Error'
    }
</div>
);

show the entire code, are you wrapping both in an outer element? JSX requires you to return one parent element — Robbie Milejczak
– Robbie Milejczak, Commented Nov 9, 2017 at 15:49
Also, I think this.deleteRow() should just be this.deleteRow. I imagine you don't want to invoke the function immediately. — Andy
– Andy, Commented Nov 9, 2017 at 16:06

ChrisR · Accepted Answer · 2017-11-09 16:15:51Z

I took the liberty to rewrite it completely :

render() {
    const {
        display
        content
    } = this.state;
    let component = (
        <Forms
            create={this.createUser}
            sign={this.signUser}
        />
    );

    if(display) {
        const mappedContent = content.map((q) => {
            return (
                <Content
                    id={q.id}
                    key={q.id}
                    content={q.content}
                    deleteRow={this.deleteRow.bind(this)}
                />
            );
        })
        component = [
            mappedContent,
            <AppForm
                key="AppForm"
            />
        ];
    }

    return (
        <div>
            {component}
        </div>
    );
}

A few things:

If display is not true, then it's false no ? If it's not the case, do not use a boolean.
Do not hesitate to assign variables values, it helps to structure your code.

And regarding your unexpected token, you were missing a : {something} statement after your test if display was false.

Robbie Milejczak · Accepted Answer · 2017-11-09 16:18:08Z

You should post all your code. Based on this I can guess one of two issues:

{this.state.display === true ?
      this.state.content.map((q) => {
        <Content
          id={q.id}
          key={q.id}
          content={q.content}
          deleteRow={this.deleteRow()}
        />
      })
      <AppForm />

1: ? is the ternary operator. Those are for if this, then do this, else do this. For inline conditionals like the one you're writing it may be more appropriate to use {this.state.display === true ? &&. If you DO want either <Content /> or <AppForm /> depending on the condition do

{this.state.display === true ? (
      this.state.content.map((q) => {
        <Content
          id={q.id}
          key={q.id}
          content={q.content}
          deleteRow={this.deleteRow()}
        />
      })
      ) : (
      <AppForm />
      )

2: JSX requires all returned elements to be wrapped in one element. This is generally accomplished with an arbitray <div> tag.

return (
<div>
{this.state.display === true ?
      this.state.content.map((q) => {
        <Content
          id={q.id}
          key={q.id}
          content={q.content}
          deleteRow={this.deleteRow()}
        />
      })
      <AppForm />
</div>
)

If this helps, great! If not, you'll need to provide more information about your code for us to help.

EDIT: You are using the ternary operator incorrectly

return (
  <div>
    {this.state.display === true ?
      this.state.content.map((q) => {
        <Content
          id={q.id}
          key={q.id}
          content={q.content}
          deleteRow={this.deleteRow()}
        />
      })
    :
      <Forms
        create={this.createUser}
        sign={this.signUser}
      />
    }
    <AppForm />
</div>
);

That code should work ^

Basically, ? is an implicit if, else statement.

true ? 
    console.log('true')
:
    console.log('false')

If the statement to the left of the ? is true, then the statement to the left of the : is evaluated, else the statement to the right of the : is evaluated. You can't supply a second condition, or give it more than two options. You can nest ternary operators if needed but the syntax should always be condition ? if true do this : if false do this

I edited the post, can you find a solution please? Thank you
sure, see my edits @ArditGjeloshaj basically you are using the ternary operator incorrectly

Collectives™ on Stack Overflow

React JS: Syntax error: Unexpected token

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related