React Select Example not displaying dropdown

Question

I am just trying a React Select Dropdown Example using the below code:

import React from 'react';
import Select from 'react-select';
import '../../../node_modules/bootstrap/dist/css/bootstrap.min.css'; 

const techCompanies = [
{ label: "Apple", value: 1 },
{ label: "Facebook", value: 2 },
{ label: "Netflix", value: 3 },
{ label: "Tesla", value: 4 },
{ label: "Amazon", value: 5 },
{ label: "Alphabet", value: 6 },
]
const App = () => {
return (
  <div className="container">
      <div className="row">
          <div className="col-md-4" />
          <div className="col-md-4">
              <Select options={ techCompanies } />
          </div>
          <div className="col-md-4" />
      </div>
  </div>
 )    
 };

 export default App

Before this , I installed react select

npm i react-select

also installed bootstrap

npm install bootstrap --save

But after running I am getting the error:

Unable to resolve "../../../node_modules/bootstrap/dist/css/bootstrap.min.css" from "components/university/App.js" Failed building JavaScript bundle.

I can see the bootstrap.min.css under node_modules folder.

If I comment the import I am get the following : View config not found for name div. Make sure to start component names with a capital letter.

Can anyone tell where am I going wrong?Thanks in Advance.

Leo · Accepted Answer · 2020-07-25 23:31:45Z

0

You can't use html components or the usual web css in react-native. In contrast to react web, react-native will map your components to native android, ios or windows ui components. Therefore your components must be composited of react-native components. I think you should check out this answer which explains the difference between react and react-native in more depth.

In your case you could start with an App Component similiar to this:

import React, { useState } from "react";
import { View, Picker, StyleSheet } from "react-native";

const techCompanies = [
{ label: "Apple", value: 1 },
{ label: "Facebook", value: 2 },
{ label: "Netflix", value: 3 },
{ label: "Tesla", value: 4 },
{ label: "Amazon", value: 5 },
{ label: "Alphabet", value: 6 },
]

const App = () => {
  const [selectedValue, setSelectedValue] = useState(1);
  return (
    <View style={styles.container}>
      <Picker
        selectedValue={selectedValue}
        style={{ height: 50, width: 150 }}
        onValueChange={itemValue => setSelectedValue(itemValue)}
      >
        {techCompanies.map(({ label, value }) =>
           <Picker.Item label={label} value={value} key={value} />)}
      </Picker>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 40,
    alignItems: "center"
  }
});

export default App;

see https://reactnative.dev/docs/picker for reference.

Old answer, before we learned that this is about react-native:

Your original code actually looked fine and should work.

However the css import should usually be your first import, because you want styles inside imported components to take precedence over the default styles. source

The added braces and return are not needed at all...

Also I would recommend using import 'bootstrap/dist/css/bootstrap.min.css' instead of import '../../../node_modules/bootstrap/dist/css/bootstrap.min.css'. The Babel+Webpack setup of create-react-app will take care of figuring out the location of the bootstrap module. If you use a relative path instead, there will be errors as soon as you move the file with the import...

Maybe something went wrong during your package installation? I'd suggest that you just try this:

rm -rf ./node_modules
npm install
npm run start

You can verify that your code was working in this sandbox: https://codesandbox.io/s/react-select-bootstrap-sample-g2264?file=/src/App.js

edited Jul 25, 2020 at 23:31

answered Jul 23, 2020 at 18:14

Leo

1,90717 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

GAEfan Over a year ago

OP edited the original code, which was broken. Invalid use of parentheses in arrow function. But thanks for the downvote.

Leo Over a year ago

Please open the sandbox and see for yourself ;) I've pasted his original code there. What you've pointed out as error isn't an error. Some code formatting tools might even remove the added curly braces and return statement.

GAEfan Over a year ago

Check the console. My code works flawlessly, while the OP code generates errors. And, moving the import order has zero effect.

Leo Over a year ago

I did not say that your code does not work. I just said that the changes made were unecessary. I've added a link to the docs where the import order difference is explained.

Leo Over a year ago

@GAEfan If you would just check the sandbox you could see that the original code was indeed completely fine and you might also learn something new...

|

GAEfan · Accepted Answer · 2020-07-23 17:33:07Z

-1

Your import looks fine. Sometimes the error messages throw us off track, as the real error is caused by some other compiling issue. So, try fixing this first:

You are confusing parentheses and curly braces. Plus, you are missing a return. Should be:

const App = () => {
    return (
        <div className="container">
            <div className="row">
                <div className="col-md-4" />
                <div className="col-md-4">
                    <Select options={ techCompanies } />
                </div>
                <div className="col-md-4" />
            </div>
        </div>
    );    
 };

edited Jul 23, 2020 at 17:33

answered Jul 22, 2020 at 15:52

GAEfan

11.4k2 gold badges20 silver badges34 bronze badges

6 Comments

Poornima Gurudath Over a year ago

I corrected the braces and also changed the url but no luck.I am getting the same error:Unable to resolve "../../node_modules/bootstrap/dist/css/bootstrap.min.css" from "components/university/App.js" Failed building JavaScript bundle.

GAEfan Over a year ago

Your App.js is nested 3 directories down, so try: import '../../../node_modules/bootstrap/dist/css/bootstrap.min.css';

Poornima Gurudath Over a year ago

I tested it but still same error: Unable to resolve "../../../node_modules/bootstrap/dist/css/bootstrap.min.css" from "components/university/App.js" Failed building JavaScript bundle.

GAEfan Over a year ago

Comment out that import line and see if another error pops up

Poornima Gurudath Over a year ago

As expected: View config not found for name div. Make sure to start component names with a capital letter

|

Collectives™ on Stack Overflow

React Select Example not displaying dropdown

2 Answers 2

12 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related