I need to understand what I am doing wrong here…
I am getting all the data from an api as choices, need to display it in the form of radio buttons and checkboxes, but when I am using for selecting one option. It is not working.
My code…
> import {
> IonCheckbox,
> IonItem,
> IonItemDivider,
> IonLabel,
> IonList,
> IonRadio,
> IonRadioGroup,
> } from "@ionic/react";
> import axios from "axios";
> import React, { useEffect, useState } from "react";
>
> const DisplayChoices = ({ choiceId, type }) => {
> const [choiceData, setChoiceData] = useState([]);
> const [selected, setSelected] = useState("choice 1");
>
> useEffect(async () => {
> let response = await axios.get(`/choice/${choiceId}`);
> const data = response.data.data;
> setChoiceData((choiceData) => [...choiceData, data]);
> }, []);
>
> const handleChange = (e) => {
> const { name, checked } = e.target;
> let tempUser = choiceData.map((data) =>
> data.text === name ? { ...data, isChecked: checked } : data
> );
> setChoiceData(tempUser);
> console.log(tempUser);
> };
>
> const handleRadio = (e) => {
> setSelected(e.detail.value);
> console.log(selected);
> };
>
> return (
> <IonItem>
> {choiceData.map((res, index) =>
> type === "checkbox" ? (
> <IonItem key={index}>
> <IonLabel>{res.text}</IonLabel>
> <IonCheckbox
> slot="start"
> color="dark"
> name={res.text}
> checked={res?.isChecked || false}
> onIonChange={handleChange}
> ></IonCheckbox>
> </IonItem>
> ) : (
> <IonList key={index}>
> <IonRadioGroup
> allowEmptySelection
> color="danger"
> value={selected}
> onIonChange={handleRadio}
> >
> <IonItem>
> <IonLabel>{res.text}</IonLabel>
> <IonRadio slot="start" value={res._id}></IonRadio>
> </IonItem>
> </IonRadioGroup>
> </IonList>
> )
> )}
> </IonItem>
> );
> };
>
> export default DisplayChoices;
1 post - 1 participant