У меня есть этот фрагмент кода ReactJS, который работал до тех пор, пока я не добавил еще несколько элементов div в верхней части render. В нем есть 3 переключателя начальной загрузки, которые я намеревался связать некоторые начальные значения с начальными значениями в конструкторе, чтобы я мог изменять их только из конструктора.

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

который при запуске выдает эту синтаксическую ошибку

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

Но то, где он указывает, где ошибка, мне кажется прекрасным.

Это связано с функцией рендеринга и данными, которые она должна получать из переменных, инициализированных в конструкторе.

Обновлять

Я использовал предложение добавить this.state. для проверки, и он работал как этот checked = {this.state.first_checked}

Но это

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

Выдает эту ошибку

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