How to display different data if a switch is toggled in React-Native-CodePudding

I'm trying to make a donut chart that shows different values. But if the switch on the screen it toggled, I want it to display a different set of values.

All the data is currently stored in an array I called data.

Donut chart package I'm using

I tried solving this problem with an if-statement to check if the toggle is enabled and changed the values of the data array accordingly. However, when I try this, I get the error "data" is read-only when I switch the toggle on.

See relevant code:

import { React, useState } from "react";
import { Switch } from "react-native";
import { DonutChart } from "react-native-circular-chart";

const ResultScreen = ({ navigation }) => {
  const [isEnabled, setIsEnabled] = useState(false);
  const data = [
    { name: "Privacy", value: 30, color: "blue" },
    { name: "Integriteit", value: 20, color: "green" },
    { name: "Collegialiteit", value: 15, color: "pink" },
    { name: "Slaap", value: 35, color: "red" },
  ];

  const toggleSwitch = () => {
    if (isEnabled) {
      data = [
        { name: "Privacy", value: 30, color: "blue" },
        { name: "Integriteit", value: 20, color: "green" },
        { name: "Collegialiteit", value: 15, color: "pink" },
        { name: "Slaap", value: 35, color: "red" },
      ];
    } else {
      data = [
        { name: "Honor", value: 50, color: "blue" },
        { name: "Usage 2", value: 10, color: "green" },
        { name: "Usage 3", value: 10, color: "pink" },
        { name: "Usage 4", value: 30, color: "red" },
      ];
    }
    setIsEnabled((previousState) => !previousState);
  };
  return (
    <DonutChart
      data={data}
      strokeWidth={15}
      radius={100}
      containerWidth={500}
      containerHeight={500}
      type="butt"
      startAngle={0}
      endAngle={360}
      animationType="slide"
    />
  );
};

export default ResultScreen;

Feel free to reach out if you need any more context!

CodePudding user response：

Your data is a const try declaring it using let. eg let data = []

CodePudding user response：

You have a few options here, the quickest one given your code would be to add ternary check in your data prop of the chart, so when you change the toggle state, it will display different data. It would look like this

 const enabledData = [
    { name: "Privacy", value: 30, color: "blue" },
    { name: "Integriteit", value: 20, color: "green" },
    { name: "Collegialiteit", value: 15, color: "pink" },
    { name: "Slaap", value: 35, color: "red" },
  ];

 const disabledData = [
    { name: "Honor", value: 50, color: "blue" },
    { name: "Usage 2", value: 10, color: "green" },
    { name: "Usage 3", value: 10, color: "pink" },
    { name: "Usage 4", value: 30, color: "red" },
  ];

  const toggleSwitch = () => {
   setIsEnabled(!isEnabled);
  };

  return (
   <DonutChart
     data={isEnabled ? enabledData : disabledData}
     strokeWidth={15}
     radius={100}
     containerWidth={500}
     containerHeight={500}
     type="butt"
     startAngle={0}
     endAngle={360}
     animationType="slide"
   />
 );

This should do the job for you, however I think you should look into optimising this logic/component if you are building something scalable.