React Select Example not displaying dropdown - reactjs

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.

Answer 1

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

Answer 2

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>
);
};