javascript - Why can't I declare a function before render in React? -

so code works, if move handleclick() render, throw error. same if try declare function

var handleclick = () => { this.setstate({reservationvisible: true}) console.log(this.state.reservationvisible)}

outside render.

also when i'm passing handleclick() prop, need call {this.handleclick.bind(this)} , when i'm using function, declared inside render, {handleclick.bind(this) enough. don't understand why. should declare functions then? outside or inside render? should use functions or methods?

here code:

import react, { component } 'react'; import room './room' import form './form'  class rooms extends component {    constructor(props){     super(props);     this.state = {reservationvisible: false}   }      handleclick(e){         this.setstate({reservationvisible: true})         console.log(this.state.reservationvisible)       }    render(){         let rooms = [         {           roomnumber: '1',           type: 'cool room',           price: '130 $',           goods: ['radio', 'phone']         },         {           roomnumber: '2',           type: 'cozy room ',           price: '165 $',           goods: ['radio', 'phone, tv']         },         {           roomnumber: '3',           type: 'dirty room',           price: '130 $',           goods: ['balcony', 'phone']         },         {           roomnumber: '4',           type: 'like real dirty room',           price: '90 $',           goods: ['fridge', 'phone', 'balcony']         }       ]        let getelements = (room, i) => {         return(           <room             key={i}             roomnumber={room.roomnumber}             type={room.type}             price={room.price}             goods={room.goods.map(good => + ", ")}             onclick={this.handleclick.bind(this)}           />         )       };       let roomsmapped = rooms.map(getelements);      return(       <div>         {roomsmapped}       </div>     )   } }  export default rooms 

and room component

import react, { component } 'react';   class room extends component{   render(){     return (       <div classname="room">         <div classname="image"><h1>image nr {this.props.roomnumber}</h1></div>         <div classname="buttongroup">           <div classname="button gallerybutton">gallery</div>           <div classname="button reserve" onclick={this.props.onclick.bind(this)}> i'll take it</div>         </div>         <div classname="info">           <div classname="topinfo">             <span classname="left">{this.props.type}</span>             <span classname="right">{this.props.price}</span>           </div>           <div classname="additional">             {this.props.goods}           </div>         </div>       </div>     )   } }  export default room