Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

241
Views
Creating dictionary in React

I'm creating an interactive viz with React and I would like to add a slider in my viz.

import "./styles.css";
import React from "react";
import Sunburst from "react-zoomable-sunburst";
import { data } from "./data";
import { Slider } from "@mui/material";

class App extends React.Component {
  onSelect(event) {
    console.log(event);
  }
  render() {
    return (
      <div className="App">
        <Sunburst
          width="400"
          height="400"
          data={data.a}
          count_member="size"
          labelFunc={(node) => node.data.name}
          _debug={false}
        />
        <Slider
          aria-label="Year"
          defaultValue={2016}
          valueLabelDisplay="auto"
          step={1}
          marks
          min={2016}
          max={2020}
        />
      </div>
    );
  }
}

export default App;

Above is my code. I added my data from 2016 to 2020 in data.js file and I want my viz to change according to the year as I move my slider.

  a: {
    name: "2020",
    children: [
      {
        name: "Campus",
        children: [
          {
            name: "Liabilities",
            children: [
              {
                name: "Current Liabilities",
                children: [
                  { name: "Accounts payable", size: 53010 },
                  { name: "Accrued salaries", size: 23554 },
                  { name: "Unearned revenue", size: 253322 },
                  { name: "Commercial paper", size: 326008 },
                  { name: "Current portion of long-term debt", size: 112431 },
                  { name: "Funds held for others", size: 2500 },
                  { name: "Other current liabilities", size: 71036 }
                ]
              }

This is a part of my code in data.js and I named 2016 data as a, 2017 as b, and so on. I wanted to name as 2016, 2017... instead of a,b... but this didn't work since data.2016 didn't work. (So I made it data.a in the code above) So currently, my slider doesn't work. Is there any way to make dictionary or other method in React to resolve this problem?

Thanks.

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

use

data['2016']

That should work.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!