updateSelection prop not working

[ssghajar]

hi there...thanks for the repo. my react version is "16.13.1", and I use version "1.0.8" of "react-wheelpicker" in 4 components with the same props, but when I scroll in one specific component, nothing happens, please help!

return(
        <WheelPicker
              animation="flat"
              data={hour}
              defaultSelection={0}
              updateSelection={(index) => this.setState({index})}
              height={40}
              parentHeight={130}
              fontSize={14}
              scrollerId={"conversion-hour"+Math.random()}
          />
)

[sahilverma2209]

Hi, did you make sure that the scrollerId is different for all 4 of them? I would recommend using something like uuid for the same. Also, You would need a different state for each selection. If you use the same return function to render all wheel-pickers they will point to the same 'index' key on parent's state. Would require a little more of your code to debug this further. If you could show me how your parent component looks like?

[ssghajar]

Hi, did you make sure that the scrollerId is different for all 4 of them? I would recommend using something like uuid for the same. Also, You would need a different state for each selection. If you use the same return function to render all wheel-pickers they will point to the same 'index' key on parent's state. Would require a little more of your code to debug this further. If you could show me how your parent component looks like?

As you can see I used Math.randon() also different strings as scrollerId and different functions to handle indices. hear is the function that is returning in render function. according to the <View> tag, I use "react-native-web" v"0.13.13"

renderTimePicker = (hour, minute) => {
    return (
      <View
        style={{
          backgroundColor: quaternaryBackground,
          paddingVertical: 10,
          borderRadius: 5,
          width: flexWidth_2,
        }}
      >
        <View
          style={[
            {
              alignItems: "center",
              width: "100%",
              justifyContent: "center",
            },
          ]}
        >
          <View
            style={{
              width: "70%",
              flexDirection: "row",
              justifyContent: "space-evenly",
            }}
          >
            <WheelPicker
              animation="flat"
              data={hour}
              defaultSelection={0}
              updateSelection={(index) => this.handleHourPicker(index)}
              height={40}
              parentHeight={130}
              fontSize={14}
              scrollerId={"conversion-hour"+Math.random()}
            />
            <WheelPicker
              animation="flat"
              defaultSelection={0}
              data={minute}
              updateSelection={(index) => this.handleMinutePicker(index)}
              height={40}
              parentHeight={130}
              fontSize={14}
              scrollerId={"conversion-minute"+Math.random()}
            />
          </View>
        </View>
      </View>
    );
  };

[sahilverma2209]

Hey were you able to debug this? Any changes required from the package side??