Dynamic Segments not working in WheelComponent

[sonykashyap]

Hi, I have one issue with the wheel. If the static array is being passed to WheelComponent it works fine but if I get the values from inputs and store those values in the array and pass it to WheelComponent it doesn't update. Could you please help to solve this?

[shekharramola]

Hi, can you reproduce the issue into sandbox?

[sonykashyap]

Hi, can you reproduce the issue into sandbox?

Yes, will surely reproduce this.

[sonykashyap]

Hi, Here is the sandbox link. I added segments to a separate state and added more elements on the button click. The state updates however don't reflect in the wheel.

https://codesandbox.io/s/jm148?file=/src/App.js

[shekharramola]

the link which you pasted above does not have any state update. it is just reading segments from the constant variable

[sonykashyap]

Add Segment button invokes the "addSegmentHandler" method that updates the state. You can check the console, state changes, and segments added but the wheel does not update.

[shekharramola]

Yes I can check that but for that you need to provide code sandbox link

[sonykashyap]

https://codesandbox.io/s/react-wheel-of-prizes-forked-wxnxd4?file=/src/App.js:0-1243

Check out this link. If you don't see states then replace below-mentioned code with the existing code in App.j.

import React, { useEffect, useState } from "react"; import "./styles.css"; import WheelComponent from "react-wheel-of-prizes"; import "react-wheel-of-prizes/dist/index.css";

const App = () => { const [segments, setSegments] = useState([ "better luck next time", "won 70", "won 50", "better luck next time", "won 2", "won uber pass", "better luck next time", "won a voucher" ]);

const segColors = [ "#EE4040", "#F0CF50", "#815CD1", "#3DA5E0", "#34A24F", "#F9AA1F", "#EC3F3F", "#FF9000" ]; const onFinished = (winner) => { alert(winner); };

const addSegmentHandler = () => { setSegments((oldSegments) => [...oldSegments, "Surprise Box"]); };

useEffect(() => {}, []); console.log("Segments are ", segments); return ( <>

Add Segment

  <div className="wheel-box">
    <WheelComponent
      segments={segments}
      segColors={segColors}
      winningSegment="won 60"
      onFinished={(winner) => onFinished(winner)}
      primaryColor="black"
      contrastColor="white"
      buttonText="hello"
    />
  </div>
</>

); };

export default App;

[shekharramola]

@sonykashyap you need to provide unique key to the component if you are changing the segments on run time.

https://codesandbox.io/s/react-wheel-of-prizes-forked-u6vovb?file=/src/App.js

also to learn more about key, you can go through this article

https://epicreact.dev/why-react-needs-a-key-prop/