I am trying to display the weight the user picks using the scroller below the button but I cannot find the right combination of useState and this.value to make it appear. I have conditional filtering on my scroll picker so that it shows different scrollers based on whether they pick kg or stone, which is all working well. I just can't get it to now allow me to use the values they pick in my answer which is super frustrating as I need to display the weight back to the user.
Can anyone help?
I've added a Text tag where I want the weight values to show.
interface Props { onConfirm: (selections: Selections) => void; } interface State { options: PickerOptions; selections: Selections; visible: boolean;}class WeightPicker extends Component<Props, State> { generateOptions = () => {const { categories, units, Stones, Lbs } = options;const { selections } = this.state;if (selections.category == 'KG') {return [ { key: 'category', items: categories, }, { key: 'units', items: generatePickerItems( 300), },]} else { return [ { key: 'category', items: categories, }, { key: 'Stones', items: Stones, }, { key: 'Lbs', items: Lbs, },];}}; onValueChange = ({ column, value }) => {this.setState((prevState) => ({ selections: { ...prevState.selections, [column]: value, },})); }; constructor(props) {super(props);this.state = { selections: { category: options.categories[0].value, units: undefined, }, visible: false,}; } showPicker = () => {this.setState({ visible: true }); }; hidePicker = () => {this.setState({ visible: false }); }; onConfirm = (selections: Selections) => {this.setState({ visible: false, selections,},async () => { // Wait for the close animation time to avoid fade out glitches! await new Promise(resolve => setTimeout(resolve, ANIMATION_TIME)); this.props.onConfirm(selections);},); console.log(selections); }; render() { const { options, selections, visible } = this.state; return (<View style={{ width: '100%', alignItems: 'center' }}><Button onPress={this.showPicker} testID="EXAMPLE_B">Add / Edit Your Weight</Button><SegmentedPicker visible={visible} onConfirm={this.onConfirm} onCancel={this.hidePicker} options={this.generateOptions()} onValueChange={this.onValueChange} defaultSelections={this.state.selections} /><Text>Weight : WANT THE WEIGHT TO DISPLAY HERE</Text></View>); } }