reactjs - Why declearing function(Element) outside render doesn't work? -

i want create dynamic element inside parent component class. gives unexpected token @ function declaration. writing same function inside return(..here..) works. missing?
code:

import react, { component } 'react'; import '../app.css'; var axios = require('axios');  class displayrevenue extends component {    constructor(props){     super(props);     this.state = { data:[] }   }   componentwillmount() {    this.loadrevenue(this.props.url, this.props.token);  }    setdata(data){     this.setstate(data:data);     console.log(this.state.data);    //this gives output json object   }    loadrevenue(url,token){     axios({       method:'get',       url:url,       headers: {         authorization: `bearer ${token}`,       },     })      .then( (response) => {     //   console.log(response.data);        this.setdata(response.data);      })      .catch(function (error) {        console.log("error in loading revenue "+error);      });   }    var listdata = this.state.data.map( (invoice) => {return <div>{invoice.customernumber}</div>}) //above function gives error    render() {     //var listdata = this.state.data.map( (invoice) => (<div>{invoice.customernumber}</div>)     return (       <div>         <h3>monthtodate</h3>           {this.state.data.map((invoice) => {return <div>{invoice.customernumber}</div>})}       </div>     );   } }  export default displayrevenue;          

i have json object array below:

"data": [     {         "customerid": 0,         "customernumber": "it8sds",         "customertype": "rvn",         "invoicetype": "lbr",         "invoiceamt": "52651.2287",         "invoicestatus": "billed",         "invoicedate": "2016-12-30t00:00:00.000z"     },     {         "customerid": 1,         "customernumber": "dc0wty",         "customertype": "rvn",         "invoicetype": "rnt",         "invoiceamt": "198503.1828",         "invoicestatus": "billed",         "invoicedate": "2016-12-30t00:00:00.000z"     },     {         "customerid": 2,         "customernumber": "lk8md5",         "customertype": "int",         "invoicetype": "eqt",         "invoiceamt": "-6833.70721",         "invoicestatus": "pending",         "invoicedate": "2016-12-30t00:00:00.000z"     },     {         "customerid": 3,         "customernumber": "e03ptj",         "customertype": "pct",         "invoicetype": "pts",         "invoiceamt": "55670.17911",         "invoicestatus": "billed",         "invoicedate": "2016-12-19t00:00:00.000z"     }, 

note: writing {this.state.data.map((invoice) => {return <div>{invoice.customernumber}</div>})} inside return(..here..) in render() works.

you can't declare variables inside class body.
can inside functions (such render, constructor, react life cycle methods, custom functions etc...).
if want "react way" make listdata component:
example:

const listdata = data => (   <div>     {data.map( (invoice) => <div>{invoice.customernumber}</div>)}   </div> );  

and use so:

 render() {     return (       <div>         <h3>monthtodate</h3>         <listdata data={this.state.data} />       </div>     );   } 

here working example:

const listdata = ({data}) => (    <div>      {data.map((o) => (<div>{o}</div>))}    </div>  );    const app = () => (    <div>      <h2>hello</h2>      <listdata data={["hi", "i'm", "a", "test"]} />    </div>  );    reactdom.render(<app />, document.getelementbyid('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>  <div id="root"></div>