react select options
import React, { Component } from 'react'
import Select from 'react-select'
const options = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' }
]
const MyComponent = () => (
<Select options={options} />
)html select react
class FlavorForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: 'coconut'};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) { this.setState({value: event.target.value}); }
handleSubmit(event) {
alert('Your favorite flavor is: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Pick your favorite flavor:
<select value={this.state.value} onChange={this.handleChange}> <option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
<option value="coconut">Coconut</option>
<option value="mango">Mango</option>
</select>
</label>
<input type="submit" value="Submit" />
</form>
);
}
}react select
const [selected,setSelected]=useState(null)
return(
<select value={selected} onChange={setSelected}>
<option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
<option value="coconut">Coconut</option>
<option value="mango">Mango</option>
</select>
)react select options
yarn add react-selectreact select
npm i --save react-select // with npmreact-select example
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import AsyncSelect from 'react-select/lib/Async'
import axios from 'axios'
import './styles.css'
const NEW_API_KEY = '?api_key=cfe422613b250f702980a3bbf9e90716'
const SEARCH_URL = 'https://api.themoviedb.org/3/search/movie'
const LANGUAGE = '&language=en-US&'
const END_OPTIONS = '&page=1&include_adult=false'
const QUERY = `query=`
export default class App extends Component {
state = {
selectedTitle: ''
}
searchTitles = async (movieTitle) => {
const urlRequest =
`${SEARCH_URL}${NEW_API_KEY}${LANGUAGE}${QUERY}
${!movieTitle && 'a'}${END_OPTIONS}`
const { data } = await axios.get(urlRequest)
const compare = data.results
.filter((i) =>
i.overview.toLowerCase().includes(movieTitle.toLowerCase())
)
.map((film) => ({
label: film.title,
value: film.id
}))
return compare
}
render() {
return (
<div className="App">
<AsyncSelect
cacheOptions
defaultOptions
value={this.state.selectedTitle}
loadOptions={this.searchTitles}
onChange={(property, value) => {
this.setState({ selectedTitle: property })
}}/>
</div>
)
}
}
const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
