How to add values from state into a object

Question

I have a object called jiraTicketChartData. The dataset has a data key which have hard coded values. I want to replace those hard coded values with the state variable (jiraticketsData) data. I want to access the pie chart values with those numbers.

Here is how the state data is being used.

jiraticketsdata

const defects = () => {
    const loading = useContext(LoadingContext)
    const snackbar = useContext(SnackbarContext)
    const user = useContext(UserContext)

    const [jiraticketsData, setJiraTicketsData] = useState(null)

    useEffect(() => {
      async function onLoadJiraTicketData() {
        loading.setLoading(true)
        const results = await get(`get_jira_tickets`, user.user)
        if (results.status === 0) {
          setJiraTicketsData(results.data)
        } else if (results.status >=20 && results.status <=30){
          snackbar.statusCheck(results)
          user.setSessionTokenMatches(false)
        } else snackbar.statusCheck(results)
        loading.setLoading(false)
        }
        onLoadJiraTicketData()

    }, [])

    const jiraTicketChartData = {
      labels: ['backlog', 'in progress', 'in review'
      ],

      datasets: [
        {
          backgroundColor: [
            'blue',
            'orange',
            'green'
          ],
          data: [1,3,3], ***This data should be replaces jiraticketsData.piechart values***
        }
      ]
    }


  return (!jiraticketsData ? null :
    <PageWrapper title={'Jira Tickets'}>
    <div className="jiraTicketChartContainer" >
    <Pie
          data={jiraTicketChartData}
          options={{
            title:{
              display:true,
              text:'Open Issues by priority',
              position: 'top',
              fontSize:20
            },
            legend:{
              display:true,
              position:'left'
            }
          }}
        />
    </div>
    </PageWrapper>

  )
}


export default defects

Dev tools props being passed:

[Dev tools props being passed]

updated code:

  useEffect(() => {
      async function onLoadJiraTicketData() {
        loading.setLoading(true)
        const results = await get(`get_jira_tickets`, user.user)
        if (results.status === 0) {
          setJiraTicketsData(results.data)

        } else if (results.status >=20 && results.status <=30){
          snackbar.statusCheck(results)
          user.setSessionTokenMatches(false)
        } else snackbar.statusCheck(results)
        loading.setLoading(false)
        }
        onLoadJiraTicketData()

    }, [])

 
    useEffect(() => {
      jiraTicketChartData.datasets[0].data = Object.values(jiraticketsData.pie_chart);
  }, [jiraticketsData]);




    const jiraTicketChartData = {
      labels: ['backlog', 'in progress', 'in review'
      ],

      datasets: [
        {
          backgroundColor: [
            'blue',
            'orange',
            'green'
          ],
          data:  jiraticketsData.pie_chart
        }
      ]
    }

updated error:

Answer 1

pie_chart is an object so you will have to access the Object.values like so:

In the useEffect if statement try:

if (results.status === 0) {
    setJiraTicketsData(results.data);
    jiraTicketChartData.datasets[0].data = Object.values(results.data.pie_chart);
}

Alternatively you could setup another useEffect hook just for that, but then you will introduce another re-render something to keep an eye on, like so

useEffect(() => {
    jiraTicketChartData.datasets[0].data = Object.values(jiraticketsData.pie_chart);
}, [jiraticketsData]);