reactjs - Changed code from foundation to bootstrap now my entire form is not clickable, what gives? -

if need more info please not down vote! new site , better @ asking these questions. update quickly. in advance!

this silly mistake on part. believe working before, had done change styling foundation bootstrap , of react components not work properly. here's couple snippets of afflicted code. i'm hoping can few ideas happened. text area 


import react 'react';  import { controllabel } 'react-bootstrap' import { formcontrol } 'react-bootstrap'  const checkfield = (props) => {   return(   <div>     <controllabel>{props.label}</controllabel>       <formcontrol         name={props.body}         type='text'         onchange={props.handlerfunction}         value={props.content}       />       <formcontrol.feedback />   </div>     );   }    export default checkfield; 

this form

     import react, { component } 'react';      import checkfield '../components/checkfield'      import arrowcontainer './arrowcontainer'      import { formgroup } 'react-bootstrap'      import { formcontrol } 'react-bootstrap'      class formcontainer extends component {     constructor(props) {       super(props);       this.state = {         errors: {},         checkconsumed: '',         check: ''       }         this.handleclearform = this.handleclearform.bind(this);         this.handleformsubmit = this.handleformsubmit.bind(this);         this.handlecheckchange = this.handlecheckchange.bind(this);         this.validatecheck = this.validatecheck.bind(this);       }         // componentdidmount() {       //   this.loadreviewsfromserver();       //   setinterval(this.loadreviewsfromserver.bind(this), this.props.pollinterval);       // }          // setinterval(clickhandler)         // {this.props.onclick, this.state.actualtimeselected)};        handleclearform(event) {         event.preventdefault();         this.setstate({           errors: {},           checkconsumed: '',           check: ''         })       }       handleformsubmit(event) {         event.preventdefault();         {           let formpayload = {             check: this.state.checkconsumed,             category_id: this.props.categoryid           };           if (this.validatecheck(formpayload.check)){              this.props.addnewreality(formpayload);             this.handleclearform(event);           }          }       }       handlecheckchange(event) {         this.setstate({ checkconsumed: event.target.value })       }        validatecheck(check) {         if (check === '') {           let newerror = { check: 'you must write check.' }           this.setstate({ errors: object.assign(this.state.errors, newerror) })           return false         } else {           let errorstate = this.state.errors           delete errorstate.handleformsubmit           this.setstate({ errors: errorstate })           return true         }       }   render() {     let errordiv;     let erroritems;     if (object.keys(this.state.errors).length > 1) {       erroritems = object.values(this.state.errors).map(error => {         return(<li key={error}>{error}</li>)       })       errordiv = <div classname="callout alert">{erroritems}</div>     }   return (       <div>         <formgroup classname="callout reactform col-xs-2 col-sm-8 `col-md-4 col-lg-12 " onsubmit={this.handleformsubmit}>`         {errordiv}         <div classname="reality input">           <checkfield classname="reality input"             content={this.state.checkconsumed}             label='create question quote or statement database!'             name='check'             placeholder="realities"             type="text"             id="reality"             handlerfunction={this.handlecheckchange}           />         </div>           <div classname="button-group expanded react-buttons">             <button classname="button large" id="clear" onclick={this.handleclearform}>clear</button>             <input classname="button large" type="submit" id="submit" value="submit" />             <button classname="reload success button" >               <a classname="reload" href="javascript:location.reload(true)">reload realities see yours!</a>             </button>           </div>         </formgroup>         <div classname= "animated slideinleft arrow">           <           arrowcontainer           user_id = {this.props.user}           categoryid = {this.props.categoryid}           checkconsumed = {this.props.checkconsumed}/>         </div>        </div>     );   } } export default formcontainer; 

so after few suggestions colleagues looked css targeting container having issues with. actually, deleted it. , works. css rude , doesn't play nice. hope helps 1 day.