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} />
)React
A JS Library that is considered one of the best frameworks/libraries of JS, Thi is Made by Facebook, If u want check out Clever Programmer, the god of React in Youtubehtml 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
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
