React-select: Multi select, display only selected items count

[tynarbekov]

Hi all. I tried many of ways to do this. I render as component multiValueContainer.
But I didn't find right way to render only selected items count.
Can anyone help me?

[buixuanhai]

Did you create a custom MultiValueContainer?

[tynarbekov]

Yes. like this.

multiValueContainer = (selectProps: any) => {
const label = selectProps.data.label
const allSelected = selectProps.selectProps.value
const index = allSelected.findIndex((selected: OptionValues) => selected.label === label)
const isLastSelected = index === allSelected.length - 1
const labelSuffix = isLastSelected ? `: ', ' return ( <components.MultiValueContainer> <Typography className={styles['selected-items']} type='Body1'> {${label}${labelSuffix} `}


)
}

[timbset]

Did you find the solution? I'm trying to do the same - just render the "N items are selected" label instead of tags. Already spent much time and didn't find something working.

[Rall3n]

This question has already been asked and the solution I posted there is still applicable to the latest version of react-select.

Here is also an example if you want to display an All Items selected text instead of values or count.

---

Furthermore please restrain from posting coding questions on the GitHub page of react-select. The maintainers recommend that these sort of inquiries should be posted over at Stack Overflow.

[trnitin]

Trying to get count instead of displaying all option was working before,but isn't now.
i suspect a problem in node modules,anyway have asked.
please help me
Cannot read property 'selectProps' of undefined

const ValueContainer = ({ children, getValue, props }) => {
var length = getValue().length;

    return (
         <components.ValueContainer {...props}>
                {console.log(length)}
                {!props.selectProps.inputValue && length > 2 &&
                    `${length} People${length > 2 ? "" : "s"} selected`}

                {React.Children.map(children,child => {
                    if (length < 3) {
                        return child;
                    }

                })}
                 {console.log(...props)}
                {console.log('hello')}
            </components.ValueContainer>



        );
    };

Select Component

value={selectedOption}
onChange={this.handleChange}
options={options}
isMulti={true}
// isSearchable={true}
allowSelectAll={true}
className="inputOnly react-select-container"
classNamePrefix="react-select"
placeholder="Makers"
components={{ ValueContainer }}
/* eslint no-use-before-define: 2 */ // --> ON
/>