CODEWITHSUNDEEP
reactjsmaterial-uireact-select
Kay
Kay

Reputation: 19690

cannot find module react-select with material ui example

I am struggling to implement a version of react-select with material ui in my own example. The example given in the documentation is very complicated. https://material-ui.com/components/autocomplete/

When i try to copy the code i get the following errors

ERROR in [at-loader] ./src/public/components/select.tsx:13:37
    TS2307: Cannot find module 'react-select/lib/components/containers'.

For the following dependencies.

import { ValueContainerProps } from "react-select/lib/components/containers";
import { ControlProps } from "react-select/lib/components/Control";
import { MenuProps, NoticeProps } from "react-select/lib/components/Menu";
import { MultiValueProps } from "react-select/lib/components/MultiValue";
import { OptionProps } from "react-select/lib/components/Option";
import { PlaceholderProps } from "react-select/lib/components/Placeholder";
import { SingleValueProps } from "react-select/lib/components/SingleValue";
import { ValueType } from "react-select/lib/types";

I have installed both @types/react-select and react-select.

Upvotes: 0

Views: 1492

Answers (2)

ravibagul91
ravibagul91

Reputation: 20765

The link you have provided in your post i.e. - https://material-ui.com/components/autocomplete/

This link does not contain any example which imports 

import { ValueContainerProps } from "react-select/lib/components/containers";
import { ControlProps } from "react-select/lib/components/Control";
import { MenuProps, NoticeProps } from "react-select/lib/components/Menu";
import { MultiValueProps } from "react-select/lib/components/MultiValue";
import { OptionProps } from "react-select/lib/components/Option";
import { PlaceholderProps } from "react-select/lib/components/Placeholder";
import { SingleValueProps } from "react-select/lib/components/SingleValue";
import { ValueType } from "react-select/lib/types";

Simple steps to make your react-select work,

  1. Install react-select using,

    yarn add react-select / npm install react-select --save

  2. Import the default export and render in your component:

    import Select from 'react-select'

  3. Usage,

    <Select options={options} />

You need to pass options here, option are nothing but your dropdown options.

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
]

Upvotes: 1

Monika Mangal
Monika Mangal

Reputation: 1760

You can try import like (without the actual path) - 

import { ValueContainerProps } from "react-select";

Also there is no 'lib' folder inside the react-select. Are you sure you are giving the right path?

Upvotes: 1

Related Questions