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-25T23:31:45.530

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 '20 at 23:31

answered Jul 23 '20 at 18:14

Leo

1,702
13
15

OP edited the original code, which was broken. Invalid use of parentheses in arrow function. But thanks for the downvote. – GAEfan Jul 23 '20 at 18:22
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. – Leo Jul 23 '20 at 18:25
Check the console. My code works flawlessly, while the OP code generates errors. And, moving the import order has zero effect. – GAEfan Jul 23 '20 at 18:32
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 Jul 23 '20 at 18:35
@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... – Leo Jul 23 '20 at 18:39
Check the console. I prefer code that doesn't cause errors. – GAEfan Jul 23 '20 at 18:54
For your information I am using React Native.I learnt that bootstrap is not usable in react-native. – Poornima Gurudath Jul 23 '20 at 21:22
@GAEfan sandbox doesn't have any errors in the console – Leo Jul 24 '20 at 18:11
@PoornimaGurudath That is a very important informaiton. Not only bootstrap wont work in react-native, but also react-select and html components wont be usable. – Leo Jul 24 '20 at 18:12
@PoornimaGurudath I've updated my answer with an explanation about react-native – Leo Jul 24 '20 at 18:27
@Leo Thanks so much I got a list of values and also info on React-Native picker(a '}' was missing before in the above code).Previously I had tried Picker.But the values I get from the api are very long values.I was trying to use a select list other than Picker that gives nice outlook for the app page.... – Poornima Gurudath Jul 25 '20 at 17:13
I've added the missing bracket. You can style the picker in pretty much every way you want, so that it looks nicer. Also there are a lot of ui component frameworks, like react-native-elements or react-native-paper which can help a lot if you don't want to build your design from the ground up. However most of those frameworks do not support pickers directly as they are not that common in apps, as on the web. – Leo Jul 25 '20 at 23:39

GAEfan · Answer 2 · 2020-07-23T17:33:07.657

-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 '20 at 17:33

answered Jul 22 '20 at 15:52

GAEfan

11,244
2
17
33

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. – Poornima Gurudath Jul 22 '20 at 17:14
Your App.js is nested 3 directories down, so try: `import '../../../node_modules/bootstrap/dist/css/bootstrap.min.css';` – GAEfan Jul 22 '20 at 17:51
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. – Poornima Gurudath Jul 23 '20 at 01:55
Comment out that import line and see if another error pops up – GAEfan Jul 23 '20 at 02:36
As expected: View config not found for name div. Make sure to start component names with a capital letter – Poornima Gurudath Jul 23 '20 at 17:12
So, now we are arriving at the 3rd error in your code. Please update your question to show the updated code for `App()`. It should match my answer. Your code is thinking your `
` is a component.
– GAEfan Jul 23 '20 at 17:20

React Select Example not displaying dropdown

2 Answers2