Question 33697 in React native Question posted in
The official React Native documentation can be found here.

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

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!

Tags:

2

Answers


  1. 0

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

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search