How to limit tag insertion with React Select

Question

I’m using React Select to work with input tags. By inserting something into the input and pressing enter, the tag is inserted... The point is that I could not find anything related to limitations of tags in the documentation or internet. I would like to limit at most some 10 tags. I tried to use YUP to remedy this problem, but to no avail. I am using React Select Creatable (https://react-select.com/creatable). If there was something in the pre-ready documentation it would be much better. One idea that was in my mind, was to check the tags you have in the application state, and then make a condition to know if there are 10 tags or not. Suggestions about this possible solution are very useful.

Code snippet I’m using:

<CreatableSelect
    styles={customStyles}
    inputValue={inputValue}
    components={components}
    isClearable
    isMulti
    menuIsOpen={false}
    onChange={this.handleChange}
    onInputChange={this.handleInputChange}
    onKeyDown={this.handleKeyDown}
    placeholder="Aperte enter para inserir a tag"
    value={value}
/>

Answer 1

By the link I commented you would do so with this your select

const MAX = 100; // CONSTANTE DO COMPONENTE

//...

handleChange = (e) => {
    if (this.state.value.length >= MAX) {
        // TRATAR TAMANHO MAXIMO (ERRO OU ETC)
    }

    // SENAO CONTINUA COM A LOGICA DE ATUALIZAR STATE
};