0

Hello I haven't worked a lot with React or const for that matter but right now building an application from kind of a template and I want to work in a class component instead of with cons.Does anyone know how to simply move the code so it works inside the class instead?

Here is the code :

the const part

    const MonthlyView = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
  datasets: [
    {
      label: 'Time reports',
      backgroundColor: convertHex(brandInfo, 10),
      borderColor: brandInfo,
      pointHoverBackgroundColor: '#fff',
      borderWidth: 2,
      data: monthlyReports
    },
    {
      label: 'Employees',
      backgroundColor: 'transparent',
      borderColor: brandDanger,
      pointHoverBackgroundColor: '#fff',
      borderWidth: 1,
      borderDash: [8, 5],
      data: employeesMonthly
    }
  ]
}

This I want to move inside

class Statistics extends Component {

  constructor(){
    super();
    this.state = {


    }
  }

  getReports(){
  fetch(`https://www.internsathumanit.rocks/getReports`)
            .then(res => res.json())
            .then(res => {
                console.log(res);
            }).catch((e) => {
            });
}
render(){

}
}

And I really don't have a clue where to start even.

Here is were the monthlyView data is used

    <CardBody>
            <Row>
              <Col sm="5">
                <CardTitle className="mb-0">Daily Time Reports</CardTitle>
                <div className="small text-muted">December 2017</div>
              </Col>
            </Row>
            <div className="chart-wrapper" style={{ height: 300 + 'px', marginTop: 40 + 'px' }}>
              <Line data={MonthlyView} options={mainChartOpts} height={300} />
            </div>
          </CardBody>

And what i really want is the data in the MonthlyView js object to be in state instead if its even possible so the label with months and so on is in state instead and then fill Line data={MonthlyView} with whats int the state instead

novafluff
  • 891
  • 1
  • 12
  • 30
  • what do you want to render?, do you need to render markup? what should it look like? The getReports() probably goes into `componentDidMount` life-cycle method. – Kunukn Dec 13 '17 at 13:50
  • 1
    The MonthlyView object you provided isn't a valid React component, it's just a plain javascript object. – T Porter Dec 13 '17 at 13:53
  • @ T Porter: He wants to move that constant object to the component `Statistics`. But he is not sure where to place the constants inside a component. – Madhavan.V Dec 13 '17 at 13:57
  • @Madhavan.V exactly i provided part of the render where the MonthlyView const is right now used – novafluff Dec 13 '17 at 13:58
  • I think `React` is not having a preferred way of doing this, (correct me if not). You may check the [last answer](https://stackoverflow.com/questions/32291851/how-to-define-constants-in-reactjs) here – Madhavan.V Dec 13 '17 at 14:07

0 Answers0