'Select.Option' cannot be used as a JSX component

Question

I wrote select component using antd select

"react": "^16.9.9", "antd": "^3.26.17", "typescript": "4.7.4",

 export const SelectComponent = React.forwardRef<any, Props>(
  (
    {
      onChange,
      className,
      loading,
      mode = SelectMode.default,
      showArrow,
      dropdownRender,
      data,
      disabled,
      background,
      border,
      boxShadow,
      color,
      height,
      style,
      showSearch,
      value,
      dropdownStyle,
    }: Props,
    ref
  ) => {
    const wrapperProps = {
      background,
      border,
      boxShadow,
      color,
      height,
      className,
    };

    return (
      <S.Wrapper {...wrapperProps}>
        <Select
          onChange={onChange}
          loading={loading}
          mode={mode}
          showArrow={showArrow}
          className={className}
          value={value}
          dropdownStyle={dropdownStyle}
          dropdownRender={dropdownRender}
          disabled={disabled}
          style={style}
          showSearch={showSearch}
          ref={c => {
            if ((ref as React.RefObject<any>).current)
              (ref as React.RefObject<any>).current.select = c;
          }}
        >
          {data?.map((item: any) => {
            return (
              <Select.Option key={item.id} value={item.id}>
                {item.name}
              </Select.Option>
            );
          })}
        </Select>
      </S.Wrapper>
    );
  }
);

During npm run build I got the below error

 Type error: 'Select.Option' cannot be used as a JSX component.
          Its instance type 'ClassicComponent<OptionProps, any>' is not a valid JSX element.
            The types returned by 'render()' are incompatible between these types.
              Type 'React.ReactNode' is not assignable to type 'import("project-path/node_modules/@types/react-slick/node_modules/@types/react/index").ReactNode'.
                Type '{}' is not assignable to type 'ReactNode'.
        
          59 |           {data?.map((item: any) => {
          60 |             return (
        > 61 |               <Select.Option key={item.id} value={item.id}>
             |                ^
          62 |                 {item.name}
          63 |               </Select.Option>
          64 |             );

I didn't create any new components I just got the option from select and passed it like below {data?.map((item: any) => { return ( {item.name} ); })} @DBS — Muthu Kumar, Jul 14 '22 at 04:53
Does this answer your question: [NPM package cannot be used as a JSX Component - Type errors](https://stackoverflow.com/questions/71791347/npm-package-cannot-be-used-as-a-jsx-component-type-errors)? — juliomalves, Jul 15 '22 at 21:18

score 0 · Answer 1 · answered Oct 20 '22 at 16:20

0

This is the issue with the old antd version. Updating it to v4 will fix the errors, but it can also break some of your old components, so keep that in mind.

answered Oct 20 '22 at 16:20

RoranD

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 22 '22 at 09:03

'Select.Option' cannot be used as a JSX component

1 Answers1