import { Select } from 'react-jsx-select';

​

<Select

    options={[

        { value: 1, label: 1, jsx: <span>1</span> },

        { value: 2, label: 2, jsx: <span>2</span> },

        { value: 3, label: 3, jsx: <span>3</span> },

        { value: 4, label: 4, jsx: <span>4</span> },

        { value: 5, label: 5, jsx: <span>5</span> },

    ]}

    onChange={(value) => console.log(value)}

    name='sample'

    placeholder='Select Please...'

    defaultValue={2}

    disabled={true}

    required={false}

    className='form-control'

    listStyle={{

        backgroundColor: '#fafafa',

        border: '1px solid #ccc',

    }}

    activeItemStyle={{ backgroundColor: '#e0e000' }}

/>;

import { Select } from 'react-jsx-select';

​

<Select

    options={[

        { value: 1, label: 1, jsx: <span>1</span> },

        { value: 2, label: 2, jsx: <span>2</span> },

        { value: 3, label: 3, jsx: <span>3</span> },

        { value: 4, label: 4, jsx: <span>4</span> },

        { value: 5, label: 5, jsx: <span>5</span> },

    ]}

    onChange={(value) => console.log(value)}

/>;

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

/>