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}">

Answer 1

Try this out

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

Answer 2

Try this instead:

this.state.first_checked