Ionic React Multiselect

[Dittux]

greetings, I’m facing a problem with ionic-react in a multiselect, i’m when i select more than one option in my multiselect the is not show wing:
if i select only one option

---

and if i select more than only one i’m the selector stop showing data, i’m also printing the data.

---

all of this is happening in a React Functional Component (React.FC)
i’m using hooks to get and set data:

hook

const [riskForm, setRiskForm] = useState({
    id: 0,
    description: '',
    category: 0,
    inherentImpact: 0,
    inherentChance: 0,
    possibleEffects: [],
  });

const { id, description, category, inherentImpact, inherentChance, possibleEffects } = riskForm;

Select tag:

<IonSelect
                multiple
                placeholder="Seleccione..."
                name={'possibleEffects'}
                value={possibleEffects}
                onIonChange={e => updateFormRisk(e)}
              >
                {riskPossibleEffects().map((health: any, i: number) => (
                  <IonSelectOption key={i} value={JSON.stringify(health)}>
                    {health.title}
                  </IonSelectOption>
                ))}
              </IonSelect>

onIonChange Function:

const updateFormRisk = (event: any) => {
    setRiskForm({
      ...riskForm,
      [event.target.name]: event.target.value,
    })
  };

of someone can help me with this i’ll appreciate it.

[victorcarvalhosp]

@Dittux

onIonChange

Oh man, I feel like nobody cares about ionic-react. Are you able to fix this? I’m having the same issue

[Dittux]

no man, not yet. sorry

[aaronksaunders]

  const onChange = (_event:any) => {
    console.log(_event.detail.value);
    debugger;
  }

   <IonLabel>Toppings</IonLabel>
   <IonSelect multiple={true} cancelText="Nah" okText="Okay!" onIonChange={(_e)=>onChange(_e)}>
     <IonSelectOption value="bacon">Bacon</IonSelectOption>
     <IonSelectOption value="pineapple">Pineapple</IonSelectOption>
     <IonSelectOption value="sausage">Sausage</IonSelectOption>
     <IonSelectOption value="Spinach">Spinach</IonSelectOption>
   </IonSelect>

[Dittux]

but what happend if u set the value property in ur IonSelect tag?

[aaronksaunders]

class App extends React.Component {
  state = { selected: ["four"] };

  onChange = _event => {
    console.log(_event.detail.value);
    this.setState({
      selected: _event.detail.value
    });
  };

  isSelected = _item => {
    return;
  };

  render() {
    return (
      <IonApp>
        <IonSelect
          multiple="true"
          cancelText="Nah"
          value={this.state.selected}
          okText="Okay!"
          onIonChange={_e => this.onChange(_e)}
        >
          <IonSelectOption value="one">One</IonSelectOption>
          <IonSelectOption value="two">Two</IonSelectOption>
          <IonSelectOption value="three">Three</IonSelectOption>
          <IonSelectOption value="four">Four</IonSelectOption>
        </IonSelect>
      </IonApp>
    );
  }
}

[Dittux]

ok, i did the same, i stopped to use FC and refactor to Component to make multiselect work.