Reactで記事を作成するときにタブを実装する。

作るもの

必要モジュール

react-select

npm i --save react-select

コード例

import CreatableSelect from 'react-select/creatable'

export default function TabExample (){
const tags = ["JICA海外協力隊", "JICA"]
return(
	<CreatableSelect
        isMulti
        options={tagOptions}
        value={ tags.map(tag => ({ label: tag, value: tag }))} 
        onChange={
        	(newValue) => {
        		const tagValues = newValue.map(tag => tag.value) 
            	setForm({ ...form, tags: tagValues })
            }}
        placeholder="タグを入力してEnter..."
        noOptionsMessage={() => '入力してEnterで追加'}
        className='form_control_item_input'
    />
)
}

補足

他にもrsuiteというスタイリッシュなモジュールもあったが、CSSをグローバルにインポートしないといけなく、スタイルが崩れたので断念。