Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

Display the weight values the user has picked in Segmented picker

$
0
0

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>); }   }

Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>