How to list data based on the selected option using react and typescript?

user_14793051 0
Viewed 685

i have two select menus. one that displays the names of the item types. It is of two types item1 and item2. and the other select menu lists the items for the selected type item1 or item2.

below is my code,

const App = () => {

    const { item1Data } = fetchItem1Data;
    const { item2Data } = fetchItem2Data;
    const allData = (any)[] = [
        ...item1Data,
        ...item2Data,
    ]; //clubs both item1 and item2 data

    const { item1typeData } = useQuery(item1typeData, {
        variables: {
            itemType: 'item1',
        },
        notifyOnNetworkStatusChange: true,
        fetchPolicy: 'network-only',
    });
    const { item2typeData } = useQuery(item2type, {
        variables: {
            itemType: 'item2',
        },
        notifyOnNetworkStatusChange: true,
        fetchPolicy: 'network-only',
    });

    const typesData: any = allData.map((data: any) => {
        return {
            label: data.name,
            value: data.id,
        };
    });
    const itemData = [];
    return (
        <Select
            onChange={(option: SelectOption) =>
                form.setFieldValue(field.name, option.value)
            }
            options={typesData}
            placeholder="Select"
            value={typesData.filter(option => option.value === field.value)}
        />
        <Select
            options={itemData}
            placeholder="Select items"
            value={}
            onChange={}
        />

as you see in above code the second select menu doesnt have options. i want to have options for that menu based on the type selected in first select menu.

so basically when user selects one option from first select menu we need to check its type.

if type selected is item1 then i need to set itemData to item1typeData. if type selected is item2 then i need to set itemData to item2typeData. else [];

also for allData when combining both item1Data and item2Data i need to map through each item and add its type say 'item1' for item1Data and 'item2' for 'item2Data'.

how can i do it. could someone help me do it using react and typescript.

typescript reactjs
1 Answers

You need some sort of local state inside your App component where you store the selected value from the first select.

There's two pieces here -- one is fetching the data and the other is the rendering that data into a UI component. I'm going to focus on the UI aspect since that's what your asking about. You definitely have problems with the data fetching as well. But for now, let's simplify this and assume that we get two arrays item1typeData and item2typeData passed in from props.

I'm a bit confused about the requirements for the first select. I would think that the options are the two types, but you seem to be including every option here?

I think this is basically what you want:

import React, { useState } from "react";
import { Select } from "antd";
import "antd/dist/antd.css";

interface Datum {
  name: string;
  id: string;
}

interface PairedSelectProps {
  item1typeData: Datum[];
  item2typeData: Datum[];
}

const PairedSelect = ({ item1typeData, item2typeData }: PairedSelectProps) => {
  // store the currently selected type
  const [selectedType, setSelectedType] = useState<string>();

  // choose which list to show based on the current state
  const typeObjects = selectedType === "type1" ? item1typeData : item2typeData;

  // map objects to options
  const typeOptions = typeObjects.map((data) => {
    return {
      label: data.name,
      value: data.id
    };
  });

  // store the id of the selected item
  const [selectedItem, setSelectedItem] = useState<string>();

  return (
    <>
      <Select
        options={[
          {
            label: "Type 1",
            value: "type1"
          },
          {
            label: "Type 2",
            value: "type2"
          }
        ]}
        placeholder="Select Type"
        value={selectedType}
        onChange={setSelectedType}
      />
      <Select
        options={typeOptions}
        placeholder="Select Items"
        value={selectedItem}
        onChange={setSelectedItem}
      />
    </>
  );
};
user_104315740
Related