IonPicker using react

Ionic Framework Ionic React
1

Hi,
I don’t find any react example in ion-picker documentation. Is there any sample for it ? how can I present it in react? any property for that ?

2

imports…

import {  IonPicker } from "@ionic/react";
import { PickerColumn } from "@ionic/core";

functions…

  const getFirstColumn = () => {
    return {
      name: "First",
      options: [
        { text: "Aaron", value: "Aaron" },
        { text: "Andrea", value: "Andrea" }
      ]
    } as PickerColumn;
  };
  const getSecondColumn = () => {
    return {
      name: "Second",
      options: [
        { text: "Saunders", value: "Saunders" },
        { text: "Smith", value: "Smith" }
      ]
    } as PickerColumn;
  };

in render…

<IonPicker
  isOpen={true}
  columns={[getFirstColumn(),getSecondColumn()]}
  buttons={[
    {
      text: "Cancel",
      role: "cancel"
    },
    {
      text: "Confirm",
      handler: value => {
        console.log(value);
      }
    }
  ]}
></IonPicker>

Screen Shot 2020-02-28 at 10.49.57 PM
Screen Shot 2020-02-28 at 10.49.57 PM1292×736 22 KB

1 Like
3

flushed this out abit more with a blog post a a full project
Ionic React Picker Example - DEV Community :woman_technologist::man_technologist: https://buff.ly/2vrYRLq

1 Like
4

wow Thank you so much aaronksaunders.