import React, { useState } from 'react'
const ANIMALS = ['Dog', 'Cat', 'Lion', 'Elephant'];
export const Example = ()=>{
const [animal, setAnimal] = useState("");
return (
<div>
<form>
<label htmlFor="animal">
Animal:
<select
id="animal"
value={animal}
onChange={(e)=>{setAnimal(e.target.value)}}
>
<option>Select Option ... </option>
{ANIMALS.map((animal)=>(
<option key={animal}>{animal}</option>
))
}
</select>
</label>
</form>
</div>
)
}
import React, { useState } from 'react'
export const FruitSelectDropdown = () => {
const [currentFruit, setCurrentFruit] = useState('oranges')
const changeFruit = (newFruit) => {
setCurrentFruit(newFruit)
}
return (
<form>
<select
onChange={(event) => changeFruit(event.target.value)}
value={currentFruit}
>
<option value="apples">Red Apples</option>
<option value="oranges">Outrageous Oranges</option>
<option value="tomatoes">Technically a Fruit Tomatoes</option>
<option value="bananas">Bodacious Bananas</option>
</select>
</form>
)
}
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} />
)
import React 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} />
)
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>
);
}
}
import React, { Component } from 'react'
import Select from 'react-select'
const options = [
{ value: 'vanilla', label: 'Chocolate' },
{ value: 'vanilla', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' }
]
const MyComponent = () => (
<Select options={options} />
)
const [tags, setTags] = useState([])
const [tagsData, setTagsData] = useState([]);
useEffect(() => {
(async () => {
const { data } = await axios(`${process.env.REACT_APP_API_URL}/tag`);
setTagsData(data);
setTags([data[0]]);
})();
}, []);
<Select
id="react-select-tag"
isMulti
options={tagsData}
hideSelectedOptions={false}
getOptionLabel={(option) => option.content_tag}
getOptionValue={(option) => option.id} // using id as it is unique
value={tags}
onChange={(selected) => setTags(selected)}
/>
yarn add react-select
npm i --save react-select // with npm
inputValue: "uuuuu"