ajax - React-rails gem TypeError: Cannot convert a symbol to a string -

i have problem react-rails gem have bit different syntax react.js

i have created multiple form , collect data each form request api. problem cannot proceed more further because got error

typeerror: cannot convert symbol string 

below code createassociations.jsx (body)

	 handleclick(e) {          e.preventdefault();          $.ajax({              url: 'http://localhost:3001/api/v1/associations/create?',              type: 'post',              data: { name: name,association_url:url},              beforesend: function (xhr){                   xhr.setrequestheader('authorization', 'token token='+localstorage.authtoken);                   xhr.setrequestheader('accept', 'application/json');                 },              success: (data) => {                	alert("success!")              },              error: (xhr, ajaxoptions, thrownerror) =>              {                alert(xhr.responsetext);              }          });      },  	render() {	  		switch (this.state.step) {  			case 1:  				return <nameassociations fieldvalues={fieldvalues}                              nextstep={this.nextstep}                              savevalues={this.savevalues} />  			case 2:  				return <urlassociations fieldvalues={fieldvalues}                              nextstep={this.nextstep}                              handleclick={this.handleclick} />  		}  	}  })

below code nameassociations class come first before urlassociations. in nameassociations class tried save data , continue next class.

render()  	{  	return(  		<center>  		<div>  		<h1>associations</h1>  		</div>        <div classname="form-container">          <form>            <div >              <label classname="control-label" for="name">associations name </label>              <input name="name" ref="name" type="text" classname="form-control" id="name" placeholder="associations name" onchange={this._onchange} />              <span classname="help-block"></span>            </div>            <button classname="button info" onclick={this.buttonback}>  			back  		  </button>            <button type="submit" classname="button success" onclick={this.saveandcontinue}>              continue            </button>           </form>            </div>          </center>  	)  	},  	 saveandcontinue(e) {  	    e.preventdefault()  	    var data = {  	      name : this.refs.name.value  	    }    	    this.props.savevalues(data)  	    this.props.nextstep()  	  }  })

in urlassociations have codes :

return(  		<center>  		<div>  		<h1>associations</h1>  		</div>        <div classname="form-container">          <form>            <div >              <label classname="control-label" for="name">associations url </label>              <input name="url" ref="url" type="text" classname="form-control" id="url" placeholder="associations url" onchange={this._onchange} />              <span classname="help-block"></span>            </div>            <button classname="button info" onclick={this.buttonback}>      			back      		  </button>            <button classname="button success" onclick={this.props.handleclick}>              create            </button>           </form>            </div>          </center>

this urlassociations last step submit data api. there can tell me im doing wrong here ?