TypeError: Cannot read properties of undefined (reading 'NaN')

[Arsenalist]

Reproducible if you put the following in any component. Using NextJS 13 and latest version of react-custom-roulette. This works fine when mustSpin = false, but as soon as you set it to true the error happens

    const [mustSpin, setMustSpin] = useState(false)
    const data = [
        { option: '0', style: { backgroundColor: 'green', textColor: 'black' } },
        { option: '1', style: { backgroundColor: 'white' } },
        { option: '2' },
    ]
    return <div>
        <Wheel
            mustStartSpinning={mustSpin}
            prizeNumber={3}
            data={data}
            backgroundColors={['#3e3e3e', '#df3428', '#ffeeff']}
            textColors={['#ffffff']}
            onStopSpinning={() => {
                setMustSpin(false);
            }}
        />
        <button onClick={() => setMustSpin(true)}>Spin</button>
    </div>

[kanarian]

How did you fix this error @Arsenalist

[JihooDev]

@kanarian Using the initial state value stored in "state" prevents this issue from occurring.

const [onSpin, setOnSpin] = useState(false);

const data = [
    { option: '0', style: { backgroundColor: 'green', textColor: 'black' } },
    { option: '1', style: { backgroundColor: 'white' } },
    { option: '2' },
]

useEffect(() => {
    setOnSpin(true)
}, [])

return (
    <div className='event_container'>
        <div className='event_content_container'>
            <Wheel
                mustStartSpinning={onSpin}
                prizeNumber={2}
                data={data}
                backgroundColors={['#3e3e3e', '#df3428']}
                textColors={['#ffffff']}
            />
        </div>
    </div>
)

[berthelol]

Hey @Arsenalist @JihooDev this does not work for me.

Any tips ?

export const ChristmasWheel = () => {
  const [onSpin, setOnSpin] = useState(false)

  const onFinished = (winner: any) => {
    toast.success(`You won ${winner}`)
  }

  const handleSpin = () => {
    setOnSpin(true);
  }

  return <div>
    <Wheel
      mustStartSpinning={onSpin}
      prizeNumber={3}
      data={data}
      backgroundColors={['#3e3e3e', '#df3428']}
      textColors={['#ffffff']}
    />
    <Button onClick={handleSpin}>Launch</Button>
  </div>
}

[JihooDev]

Hey @Arsenalist @JihooDev this does not work for me.

Any tips ?

export const ChristmasWheel = () => {
  const [onSpin, setOnSpin] = useState(false)

  const onFinished = (winner: any) => {
    toast.success(`You won ${winner}`)
  }

  const handleSpin = () => {
    setOnSpin(true);
  }

  return <div>
    <Wheel
      mustStartSpinning={onSpin}
      prizeNumber={3}
      data={data}
      backgroundColors={['#3e3e3e', '#df3428']}
      textColors={['#ffffff']}
    />
    <Button onClick={handleSpin}>Launch</Button>
  </div>
}

where is your data ?