ReactJS SyntaxError: Unexpected token

Question

I have this snippet of ReactJS Code that's worked until after I added a few more div elements at the top of the render. In there are 3 bootstrap radio buttons which I intended to link some initial values to initial values on the constructor so I can change them only from the constructor.

class Body extends React.Component {
    constructor(props) {
       super(props);
       this.state = { 
           data : [],

           first_active: 'active',
           second_active: '',
           third_active: '',

           joke_id: 1,
           dadjoke_id: 1,
           tweet_id: 1,

           first_checked: 'checked',
           second_checked: '',
           third_checked: ''
        }
    }

    componentDidMount(){
     this.postdata()
    }

    postdata(){
        ...
    }

    render(){
       return( 
            <div>
              <div id="side-nav">
                <div className="btn-group btn-group-toggle" data-toggle="buttons">
                  <label className="btn btn-secondary {first_active}">
                    <input type="radio" name="options" id="option1" autoComplete="off" value="Joke" ref_id="{joke_id}" {first_checked} onChange={() => alert('click1')} /> Joke
                  </label>
                  <label className="btn btn-secondary {second_active}">
                    <input type="radio" name="options" id="option2" autoComplete="off" value="DadJokes" ref_id="{dadjoke_id}" {second_checked}  onChange={() => alert('click2')} /> DadJokes
                  </label>
                  <label className="btn btn-secondary {third_active}">
                    <input type="radio" name="options" id="option3" autoComplete="off" value="Tweet" ref_id="{tweet_id}" {third_checked} onChange={() => alert('click3')} /> Tweet
                  </label>
                </div>
              </div>
                <div className="col-md-7 top-padding" align="center">
                      <span className="oi oi-reload"></span>
                    </div>
                {this.state.data.length == 0 && 
                   <div> No options available.</div>
                }
                {this.state.data.length > 0 && 
                  <div className="container top-padding" id="jokes">
                       {this.state.data.map(function(item,i){
                          return(
                                <div key={item['key']} className="card col-md-7">
                                    <div className="card-body">
                                        {item['text']} 
                                    <p><span className="badge badge-secondary">{item.name}</span></p>
                                    </div>
                                </div>
                          )
                       })}
                   </div>
                }
            </div>
         )
    }
}

which on start throws this syntax error

SyntaxError: http://35.196.142.180/static/js/react-script.js: Unexpected token (52:120)
  50 |                 <div className="btn-group btn-group-toggle" data-toggle="buttons">
  51 |                   <label className="btn btn-secondary {first_active}">
> 52 |                     <input type="radio" name="options" id="option1" autoComplete="off" value="Joke" ref_id="{joke_id}" {first_checked} onChange={() => alert('click1')} /> Joke
     |                                                                                                                         ^
  53 |                   </label>
  54 |                   <label className="btn btn-secondary {second_active}">
  55 |                     <input type="radio" name="options" id="option2" autoComplete="off" value="DadJokes" ref_id="{dadjoke_id}" {second_checked}  onChange={() => alert('click2')} /> DadJokes

But where it point to as to where the error is looks fine to me.

This is linked to the render function and the data it's supposed to get from the variables initialized in the constructor.

Update

I've used the suggestion of adding this.state. for checked and it worked like this checked={this.state.first_checked}

But this

 <label className=`btn btn-secondary ${this.state.first_active}`>

Throws this error

SyntaxError: http://35.196.142.180/static/js/react-script.js: JSX value should be either an expression or a quoted JSX text (51:35)
  49 |               <div id="side-nav">
  50 |                 <div className="btn-group btn-group-toggle" data-toggle="buttons">
> 51 |                   <label className=`btn btn-secondary ${this.state.first_active}`>
     |                                    ^
  52 |                     <input type="radio" name="options" id="option1" autoComplete="off" value="Joke" ref_id="{this.state.joke_id}" checked={this.state.first_checked} onChange={() => alert('click1')} /> Joke
  53 |                   </label>
  54 |                   <label className="btn btn-secondary {this.state.second_active}">

I think you're missing a prop name. It should be something like this prop={first_checked} — Joshua
– Joshua, Commented Jun 19, 2018 at 6:43
Also, I see this in your code: className="btn btn-secondary {first_active}" that isn't the way to interpolate strings, you either need to concatenate the string and the variable, or use string interpolation with backticks and the ${var} syntax for variables — Jayce444
– Jayce444, Commented Jun 19, 2018 at 6:45
That wasn't me, I just suggested the property name. And it should be checked={this.state.first_checked}, since the value is stored in the state — Jayce444
– Jayce444, Commented Jun 19, 2018 at 6:53
If you want to omit the prop values, you should destructure them form the component state like this: const { first_checked, second_checke } = this.state; — Joshua
– Joshua, Commented Jun 19, 2018 at 6:56
Sorry, the backtick part should wrapped in curly braces, className={`something ${blah}`}. You can double check "string interpolation in react property" for specific syntax — Jayce444
– Jayce444, Commented Jun 19, 2018 at 7:24

Shiladitya · Accepted Answer · 2018-06-19 07:21:20Z

1

Try this out

<label className={`btn btn-secondary ${this.state.first_active}`}>

answered Jun 19, 2018 at 7:21

Shiladitya

12.2k17 gold badges29 silver badges43 bronze badges

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

Comments

falinsky · Accepted Answer · 2018-06-19 07:11:36Z

0

Try this instead:

this.state.first_checked

edited Jun 19, 2018 at 7:11

falinsky

7,4454 gold badges34 silver badges59 bronze badges

answered Jun 19, 2018 at 6:42

Setheal

161 silver badge2 bronze badges

Collectives™ on Stack Overflow

ReactJS SyntaxError: Unexpected token

Update

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Update

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related