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

Question

I want to create a dynamic Element inside parent Component class. It gives Unexpected token at function declaration. However writing same function inside return(..here..) works. What am I missing?
This is my code:
import React, { Component } from '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 as 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 as 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.

Answer 1

You can't declare variables inside a class body.
You can do that inside functions (such as render, constructor, react life cycle methods, custom functions etc...).
If you want to do it the "react way" make ListData as a component:
Example:
const ListData = data => (
<div>
{data.map( (invoice) => <div>{invoice.customerNumber}</div>)}
</div>
);
And use it like so:
render() {
return (
<div>
<h3>MonthToDate</h3>
<ListData data={this.state.data} />
</div>
);
}
Here is a 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>