Beginner using chart.js: having trouble display state full of data into a column chart using variables

Question

When I hand code some number into ex: "ColumnChart data={['Sun', 20], ['Mon', 15], ..." the column chart works fine. But I want to use variables in order to transfer the data because later I will be using numbers inputed by the user. How can I fix this? Also, there is no error in the console, so no help there.

import React, {Component} from 'react'
import ReactChartkick, { ColumnChart } from 'react-chartkick'
import Chart from 'chart.js'
import Income from './Income'

class Calculations extends Component {
  state = {
    weeklyIncome : {
         Sunday: 60,
         Monday: 30,
         Tuesday: 50,
         Wednesday: 20,
         Thursday: 200,
         Friday: 100,
         Saturday: 20
     }
  }

  render() {
    const weeklyIncome = this.state
    console.log(weeklyIncome)
    return (
      <div>
          <h2 className="text-center my-5">Weekly Report</h2>
          <ColumnChart data={[
            ["Sun", weeklyIncome.Sunday], 
            ["Mon", weeklyIncome.Monday],
            ["Tue", weeklyIncome.Tuesday],
            ["Wed", weeklyIncome.Wednesday],
            ["Thu", weeklyIncome.Thursday],
            ["Fri", weeklyIncome.Friday],
            ["Sat", weeklyIncome.Saturday]
          ]} />          
          <div>
            <Income/>
          </div>
      </div>
    )
  }
}

export default Calculations

Answer 1

You set the entire state object as weeklyIncome, so weeklyIncome.Sunday etc. will be undefined.

You want to destructure weeklyIncome out of the state object instead.

const { weeklyIncome } = this.state