I am using antd deign to show select option but select cant read id provided and also cannot update onChange

Question

I am using antd deign to show select option but select cant read id provided and also cannot update onChange.

import React from "react";


const data = {
  orgName: "",
  orgRegNo: "",
  orgType: "",

  orgTypes: [
    { id: "1", name: "Vendor" },
    { id: "2", name: "Supplier" },
    { id: "3", name: "Vendor and Supplier" }
  ]
};



export const MyContextTSX = React.createContext(data);

const Store = (props: any) => {
  return (
    <MyContextTSX.Provider value={data}>{props.children}</MyContextTSX.Provider>
  );
};

export default Store;

//Next page of React signup

const signinData = useContext(MyContextTSX);


const [values, setValues] = useState(signinData);

<Select
                  id={values.orgTypes.id}  //shows error while showing id
                  // name={values.orgTypes.name}
                  defaultValue="Choose"
                  style={{ width: 150 }}
                  onChange={(value: any) => //cant perform onChange
                    setValues({ ...value, name: value })
                  }
                >
                  {values.orgTypes.map((option: any) => (
                    <Option
                      key={option.id}
                      value={option.name}
                      // onChange={handleChange}
                    >
                      {option.name}
                    </Option>
                  ))}
                </Select>

I am using antd deign to show select option but select cant read id provided and also cannot update onChange.

Link to CodeSandbox

Answer 1

There are few issues in your code.

Firstly, you are trying to access id from orgTypes which is an array. Instead you can defined a normal id.

Secondly, You need to have a contextProvider wrapping your App component

Third. You need to update state in the correct format such that you are not updating the data but the selected value. For that you need to have a state for selected value

Relavant code

index.js

ReactDOM(
  <Store>
    <App />
  </Store>,
  document.getElementById("root")
);

useForm.js

import { useContext, useState } from "react";

import { MyContextTSX } from "./Store";

const useForm = ({ callback }) => {
  const values = useContext(MyContextTSX);
  const [selected, setSelected] = useState({});

  return { values, selected, setSelected };
};

export default useForm;

Register.js

const Register = () => {
  const { values, selected, setSelected } = useForm({});
  return (
    <React.Fragment>
      <Select
        id={"select"} //shows error here
        defaultValue="Choose"
        style={{ width: 150 }}
        onChange={(
          value: any //what to do here ?
        ) => setSelected(selected)} //what to do here ?
      >
        {values.orgTypes.map((option: any) => (
          <Option key={option.id} value={option.name}>
            {option.name}
          </Option>
        ))}
      </Select>
      <button onClick={() => console.log(values.orgTypes)}>Test</button>
    </React.Fragment>
  );
};