Menu
I've created a react application following the steps on the React Website, but I'm having issues utilizing the React-Select Library (particularly the Select Component).
I can only use cdn files to load dependencies, including the React-Select cdn file located on cdnjs
https://cdnjs.cloudflare.com/ajax/libs/react-select/2.1.2/react-select.js
I'm getting the following error with my react-app:
ReferenceError: Select is not defined[Learn More]
See below for my script and here for my codepen
<html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/[email protected]/dist/react-with-addons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.0.4/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.5/react-redux.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-select/2.1.2/react-select.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<title>Using React Select CDN</title>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const options = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' }
];
class App extends React.Component {
state = {
selectedOption: null,
}
handleChange = (selectedOption) => {
this.setState({ selectedOption });
console.log(`Option selected:`, selectedOption);
}
render() {
const { selectedOption } = this.state;
return (
<div>
Test Text
<Select
value={selectedOption}
onChange={this.handleChange}
options={options}
/>
</div>
);
}
}
ReactDOM.render(<App/>, document.querySelector("#root"))
</script>
</body>
</html>
I've also tried the following which throws the same error
<html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/[email protected]/dist/react-with-addons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.0.4/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.5/react-redux.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-select/2.1.2/react-select.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-select/2.1.2/react-select.js"></script>
<title>Using React Select CDN</title>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
require(['react-select'])
import Select from 'react-select';
const options = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' }
];
class App extends React.Component {
state = {
selectedOption: null,
}
handleChange = (selectedOption) => {
this.setState({ selectedOption });
console.log(`Option selected:`, selectedOption);
}
render() {
const { selectedOption } = this.state;
return (
<div>
Test Text
<Select
value={selectedOption}
onChange={this.handleChange}
options={options}
/>
</div>
);
}
}
ReactDOM.render(<App/>, document.querySelector("#root"))
</script>
</body>
</html>
How can I get React-Select to work? Perhaps
877
Both React and ReactDOM are available over a CDN. To load a specific version of react and react-dom , replace 18 with the version number.
To select a default option in React, the selected attribute is used in the option element. In React, though, instead of using the selected attribute, the value prop is used on the root select element. So, you can set a default value by passing the value of the option in the value prop of the select input element.
Babel is a transpiler i.e. it converts the JSX to vanilla JavaScript. You can view babel as an intermediate step between your code and "executable" code. React also uses ES6, which is not supported by most of the browsers. Babel converts the ES6 code to a code which is compatible with the browsers.
It looks for the latest react-select you need to add the latest dependencies -
Codepen
<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/emotion.umd.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/prop-types.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-input-autosize.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-select.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
